Package Exports

react-scroll-into-view

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-scroll-into-view) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React scroll-into-view

Declarative way for scrolling into view any page element

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.

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'

Than 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
selector	String		Required. Valid CSS Selector to element to which we want to scroll
smooth	Boolean	true	Scroll behaviour; when true - transition animation will be smooth. Otherwise instant.

TODO

tests
support for all element.scrollIntoView parameters
demo