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

Package Sidebar

Install

npm i react-scrollspy

Weekly Downloads

50,655

Version

3.4.3

License

MIT

Unpacked Size

21.9 kB

Total Files

8

Last publish

Collaborators

  • makotot