🔯 react scrollspy component
Clone or download
Latest commit c992ee4 Jan 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__test__ fix test Apr 22, 2017
src s/PropTypes/propTypes Jan 4, 2018
.babelrc use webpack for build Apr 22, 2017
.editorconfig + editorconfig Sep 7, 2015
.eslintrc add onupdate Aug 15, 2017
.gitignore add roolEl props May 5, 2017
.npmignore fix path Sep 6, 2015
.travis.yml add v8 Aug 17, 2017
CHANGELOG.md update changelog Aug 15, 2017
README.md update README Aug 16, 2017
docs.sh export as default Apr 22, 2017
package.json 3.3.5 Jan 4, 2018
postcss.config.js add onupdate Aug 15, 2017
release.sh fix module not found Apr 23, 2017
webpack.config.babel.js add offEvent & onEvent Jun 11, 2017
yarn.lock update deps Sep 14, 2017

README.md

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 }

HTML tag for Scrollspy component if you want to use 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