Skip to content

Declarative way for scrolling into view (any) page element. Tiny React utility component.

License

Notifications You must be signed in to change notification settings

dominikbulaj/react-scroll-into-view

Repository files navigation

React scroll-into-view

CI npm version bundlephobia downloads

Fast & declarative way for scrolling to any element on page. Weights less than 600B (minified + gzipped)!

Idea behind

While developing landing page we needed way to scroll page to focus on registration form. It was obvious we will use element.scrollIntoView we just need find nice way how to. This is just simple React element that provides declarative way to scroll to any element on page when it's clicked.

Demo

Check out that codesandbox example

Installation

yarn add react-scroll-into-view

or if you use npm:

npm i --save react-scroll-into-view

How to use

First import it

import ScrollIntoView from 'react-scroll-into-view'

Then use it

<ScrollIntoView selector="#footer">
  <button className="mdl-button mdl-js-button mdl-button--raised">
    Jump to bottom
  </button>
</ScrollIntoView>

<!-- somewhere down on our page we have our target element -->
<div id="footer">Scroll target element</div>

Props

Name Type Default Description
children React.ReactNode The content of the component
selector string Required. Valid CSS Selector to element to which we want to scroll
smooth boolean true Scroll behavior; when true - transition animation will be smooth. Same as setting scrollOptions.behavior = smooth
style React.CSSProperties CSS styles passed to element

NOTE prior v1.4.0 default value was {display: 'inline'}
alignToTop boolean false Whether top of the element should be aligned to the top of the visible area. Default: aligns to bottom of element
className string Optional class name to be applied to element
onClick Function with signature:
(event: React.MouseEvent<HTMLElement>) => void
Callback fired on click
scrollOptions ScrollIntoViewOptions {} Scroll options. See scrollIntoViewOptions on MDN docs. Only valid properties will be used.

Accepts options:
  • behavior (values: auto or smooth)
  • block (start, center, end, or nearest)
  • inline (start, center, end, or nearest)
  • Changelog

    Please check releases tab for full details