react scrollspy nav component
npm install react-scrollspy-nav
react-scrollspy-nav is a React component that provides smooth scrolling navigation to a web page. It also accounts for the factor that a React app may use different React router and therefore has different url patterns (for example the hash pathname in HashRouter).
See the Demo.
npm i react-scrollspy-nav --save
Usage
import React, { Component } from "react";
import ScrollspyNav from "react-scrollspy-nav";class App extends Component {
render() {
return (
offset={100}
activeNavClass="is-active"
scrollDuration="1000"
headerBackground="true"
>
Welcome!
Section 1
Section 2
Section 3
);
}
}export default App;
Note:
* The above code provides the skeleton for it to work. You need to style the nav and the target sections yourself to have better visual effect.
*
on the section div here is only an example to put more height for each section div to make the page scrollable. Adjust it according to your needs.
Props
Props that can be passed to Component
ScrollspyNav for configuration.| Name | Type | Description | Example Value |
|------|------|------| ------ |
| scrollTargetIds | Array | List of scroll target ids | ["section_1", "section_2", "section_3"] |
| offset | Number | Offset pixels to the scrollTargetIds. Default is 0 | 100 |
| activeNavClass | String | Class name for styling the nav link that's currently active | "is-active" |
| scrollDuration | String | Scroll duration for controlling how fast the nav click scrolls to its section. Default is "1000" | "1000" |
| headerBackground | String | If header has background color or not, for accurate scroll position, Default is "false" | "true" |
| router | String | The name of router used in react app if any | "HashRouter" |
Local Development
`
$ git clone git@github.com:StephenWeiXu/react-scrollspy-nav.git
$ cd react-scrollspy-nav
$ npm install
$ npm run start
#### ScrollspyNav
The component is located at src/lib/ScrollspyNav.js. If you are thinking of contributing, that's likely the file you would want to udpate.#### Example App
Open up
http://localhost:3000 to see the example app. The example app is rendered from src/index.js. It's a quick way to visually test out react-scrollspy-nav` if you make any changes.If this is your first time contributing to a github project, checkout a quick guide on making you first contributions.