react-sticky-scrollspy-nav
v0.2.0TypeScript
sticky scrollspy navigation using react hooks.
reactstickyscrollspynavreact-scrollspyreact-navigationreact-componentreact-componentsreactjs-componentreact-scroll
0/weekUpdated 3 years agoMITUnpacked: 3.1 MB
Published by huurray
npm install react-sticky-scrollspy-navreact-sticky-scrollspy-nav
react-sticky-scrollspy-nav is a simple react component that provides smooth scrolling navigation with sections to a web page.
How to install
Install via NPM package manager
``
npm i react-sticky-scrollspy-nav
Install via Yarn package manager
`
yarn add react-sticky-scrollspy-nav
How to use it
1. Add \ component. You need to add ref={createRef()} to each section item.
`jsx`
import ScrollSpy from "react-scrollspy-navigation";
`jsx`
2. Add nav props to render nav component.
`jsx`
$3
`jsx`
Header content
Header content
Header content
}
nav={["Nav1", "Nav2", "Nav3"]}
navActiveItemStyle={{ color: "red" }}
>
Nav 1 Content
Nav 2 Content
Nav 3 Content
Props
Common props you may want to specify include:
| Properties | PropType | Description |
| -------------------- | ----------- | ------------------------------------------------------------------------------------------- |
| nav | string[] | (Required) navigation names with button tag. |header
| | component | header component. |offset
| | number | offset from top of page. |onClickNav
| | function | handler which clicks navigation item scrolling and focusing section. (has 'index' argument) |style
| | object | customize root style. |navContainerStyle
| | object | customize navigation container style. |navItemStyle
| | object | customize navigation item style. |navActiveItemStyle
| | object` | customize navigation item style when activated. |
License
MIT License. Copyright (c) 2021 Junhyeok Heo (Huurray)