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
|
24 | import 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 |
|
50 | Id list of target contents.
|
51 |
|
52 | ### `currentClassName={ String }`
|
53 |
|
54 | Class name that apply to the navigation element paired with the content element in viewport.
|
55 |
|
56 | ### `scrolledPastClassName={ String }`
|
57 |
|
58 | Class name that apply to the navigation elements that have been scrolled past [optional].
|
59 |
|
60 | ### `componentTag={ String | React element type }`
|
61 |
|
62 | HTML tag or React Component type for Scrollspy component if you want to use something other than `ul` [optional].
|
63 |
|
64 | ### `style={ Object }`
|
65 |
|
66 | Style attribute to be passed to the generated <ul/> element [optional].
|
67 |
|
68 | ### `offset={ Number }`
|
69 |
|
70 | Offset value that adjusts to determine the elements are in the viewport [optional].
|
71 |
|
72 | ### `rootEl={ String }`
|
73 |
|
74 | Name of the element of scrollable container that can be used with querySelector [optional].
|
75 |
|
76 | ### `onUpdate={ Function }`
|
77 |
|
78 | Function to be executed when the active item has been updated [optional].
|
79 |
|
80 | ## Methods
|
81 |
|
82 | ### `offEvent`
|
83 |
|
84 | Remove event listener of scrollspy.
|
85 |
|
86 | ### `onEvent`
|
87 |
|
88 | Add 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 |
|
102 | Pull requests and [reporting an issue](https://github.com/makotot/react-scrollspy/issues/new) are always welcome :)
|
103 |
|
104 |
|
105 | ## License
|
106 |
|
107 | MIT
|