React scroll-into-view


Fast & declarative way for scrolling to any element on page.

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

`


Jump to bottom







`

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) => 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