@scottbamford/react-scrollto
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    react-scrollto

    React component that can scroll to itself using scrollInView when its shouldScrollTo prop is true.

    Installation

    Install react-scrollto locally within your project folder, like so:

    npm install @scottbamford/react-scrollto

    Or with yarn:

    yarn add @scottbamford/react-scrollto

    Basic Usage

    Add to the place you want to scroll to automatically.

    When you have multiple areas you may want to scroll to under different conditions, use the shouldScrollTo prop, the page will be scrolled to the component that has shouldScrollTo set to true.

    Scrolling will take place only on first render.

    Typescript

    import { ScrollTo } from '@scottbamford/react-scrollto';
    
    // Basic usage
    <ScrollTo />
    
    // Usage with children
    <ScrollTo>
        <div>
           You will scroll here.
        </div>
    </ScrollTo>
    
    // Usage with a condition or a loop
    {
        items.map(item => (
            <ScrollTo key={item.id} shouldScrollTo={item.id === idToScrollTo}>
                {item.name}
            </ScrollTo>
            )
    }

    Javascript

    import { ScrollTo } from '@scottbamford/react-scrollto';
    
    // Basic usage
    <ScrollTo />
    
    // Usage with children
    <ScrollTo>
        <div>
           You will scroll here.
        </div>
    </ScrollTo>
    
    // Usage with a condition or a loop
    {
        items.map(item => (
            <ScrollTo key={item.id} shouldScrollTo={item.id === idToScrollTo}>
                {item.name}
            </ScrollTo>
            )
    }

    CSS and Styling

    renders as a div with a CSS class of scroll-to-active when the we have scrolled to that element. This allows you to style its children using CSS. For example to put a orange border around a Card found within the the active ScrollTo in order to highlight it from other cards in a loop:

    css .scroll-to-active > .card { border-color: orange; }

    Typescript

    This package is written in typescript and comes with its own bindings.

    License

    Licensed under the MIT license.

    Install

    npm i @scottbamford/react-scrollto

    DownloadsWeekly Downloads

    11

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    10.5 kB

    Total Files

    16

    Last publish

    Collaborators

    • scottbamford