UNPKG

2.76 kBMarkdownView Raw
1# react-scrollspy
2
3[![npm version](https://img.shields.io/npm/v/react-scrollspy.svg?style=flat-square)](https://www.npmjs.com/package/react-scrollspy)
4[![travis](http://img.shields.io/travis/makotot/react-scrollspy.svg?style=flat-square)](https://travis-ci.org/makotot/react-scrollspy)
5[![dependencies](http://img.shields.io/david/makotot/react-scrollspy.svg?style=flat-square)](https://github.com/makotot/react-scrollspy)
6[![DevDependencies](http://img.shields.io/david/dev/makotot/react-scrollspy.svg?style=flat-square)](https://github.com/makotot/react-scrollspy)
7[![License](http://img.shields.io/npm/l/react-scrollspy.svg?style=flat-square)](https://github.com/makotot/react-scrollspy)
8[![downloads](https://img.shields.io/npm/dm/react-scrollspy.svg?style=flat-square)](https://www.npmjs.com/package/react-scrollspy)
9
10> Scrollspy component
11
12[Demo](http://makotot.github.io/react-scrollspy/)
13
14## Install
15
16```sh
17$ npm i react-scrollspy
18```
19
20
21## Usage
22
23```js
24import Scrollspy from 'react-scrollspy'
25
26...
27
28<div>
29
30 <div>
31 <section id="section-1">section 1</section>
32 <section id="section-2">section 2</section>
33 <section id="section-3">section 3</section>
34 </div>
35
36 <Scrollspy items={ ['section-1', 'section-2', 'section-3'] } currentClassName="is-current">
37 <li><a href="#section-1">section 1</a></li>
38 <li><a href="#section-2">section 2</a></li>
39 <li><a href="#section-3">section 3</a></li>
40 </Scrollspy>
41
42</div>
43```
44
45
46## Props
47
48### `items={ Array }`
49
50Id list of target contents.
51
52### `currentClassName={ String }`
53
54Class name that apply to the navigation element paired with the content element in viewport.
55
56### `scrolledPastClassName={ String }`
57
58Class name that apply to the navigation elements that have been scrolled past [optional].
59
60### `componentTag={ String | React element type }`
61
62HTML tag or React Component type for Scrollspy component if you want to use something other than `ul` [optional].
63
64### `style={ Object }`
65
66Style attribute to be passed to the generated &lt;ul/&gt; element [optional].
67
68### `offset={ Number }`
69
70Offset value that adjusts to determine the elements are in the viewport [optional].
71
72### `rootEl={ String }`
73
74Name of the element of scrollable container that can be used with querySelector [optional].
75
76### `onUpdate={ Function }`
77
78Function to be executed when the active item has been updated [optional].
79
80## Methods
81
82### `offEvent`
83
84Remove event listener of scrollspy.
85
86### `onEvent`
87
88Add event listener of scrollspy.
89
90
91## Development
92
93```sh
94$ git clone https://github.com/makotot/react-scrollspy.git
95$ cd react-scrollspy
96$ npm i
97$ npm run start
98```
99
100## Contributing
101
102Pull requests and [reporting an issue](https://github.com/makotot/react-scrollspy/issues/new) are always welcome :)
103
104
105## License
106
107MIT