react-scroll-into-view
    TypeScript icon, indicating that this package has built-in type declarations

    1.10.1 • Public • Published

    React scroll-into-view

    Build Status npm version bundlephobia code style: prettier

    Fast & declarative way for scrolling to any element on page. Weights only ~1.3 kB 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
    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.
    style Object {} 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 Callback fired on click
    scrollOptions Object {} Scroll options. See scrollIntoViewOptions on MDN docs. Only valid properties will be used.
    Accepts props: 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

    Keywords

    Install

    npm i react-scroll-into-view

    DownloadsWeekly Downloads

    5,483

    Version

    1.10.1

    License

    MIT

    Unpacked Size

    10.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • webit