This package has been deprecated

    Author message:

    No longer actively maintained. Please use @makotot/ghostui instead.

    react-scrollspy
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-scrollspy package

    3.4.3 • Public • Published

    react-scrollspy

    npm version travis dependencies DevDependencies License downloads

    Scrollspy component

    Demo

    Install

    $ npm i react-scrollspy

    Usage

    import Scrollspy from 'react-scrollspy'
     
    ...
     
    <div>
     
      <div>
        <section id="section-1">section 1</section>
        <section id="section-2">section 2</section>
        <section id="section-3">section 3</section>
      </div>
     
      <Scrollspy items={ ['section-1', 'section-2', 'section-3'] } currentClassName="is-current">
        <li><a href="#section-1">section 1</a></li>
        <li><a href="#section-2">section 2</a></li>
        <li><a href="#section-3">section 3</a></li>
      </Scrollspy>
     
    </div>

    Props

    items={ Array }

    Id list of target contents.

    currentClassName={ String }

    Class name that apply to the navigation element paired with the content element in viewport.

    scrolledPastClassName={ String }

    Class name that apply to the navigation elements that have been scrolled past [optional].

    componentTag={ String | React element type }

    HTML tag or React Component type for Scrollspy component if you want to use something other than ul [optional].

    style={ Object }

    Style attribute to be passed to the generated <ul/> element [optional].

    offset={ Number }

    Offset value that adjusts to determine the elements are in the viewport [optional].

    rootEl={ String }

    Name of the element of scrollable container that can be used with querySelector [optional].

    onUpdate={ Function }

    Function to be executed when the active item has been updated [optional].

    Methods

    offEvent

    Remove event listener of scrollspy.

    onEvent

    Add event listener of scrollspy.

    Development

    $ git clone https://github.com/makotot/react-scrollspy.git
    cd react-scrollspy
    $ npm i
    $ npm run start

    Contributing

    Pull requests and reporting an issue are always welcome :)

    License

    MIT

    Install

    npm i react-scrollspy

    DownloadsWeekly Downloads

    31,140

    Version

    3.4.3

    License

    MIT

    Unpacked Size

    21.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • makotot