Description:
A simple react component that provides smooth scrolling navigation with sections to a web page.
How to use it:
1. Install and import the component.
# Yarn $ yarn add react-sticky-scrollspy-nav # NPM $ npm i react-sticky-scrollspy-nav
import StickyScrollSpyNav from "react-sticky-scrollspy-nav";
2. Add nav items and corresponding sections to the <StickyScrollSpyNav /> component.
<StickyScrollSpyNav
header={
<div>
<h1>Header content</h1>
<h1>Header content</h1>
<h1>Header content</h1>
</div>
}
nav={["Nav1", "Nav2", "Nav3"]}
navActiveItemStyle={{ color: "red" }}
>
<section ref={React.createRef()} style={{ height: "80vh", background: "dark" }}>
Nav 1 Content
</section>
<section ref={React.createRef()} style={{ height: "80vh", background: "grey" }}>
Nav 2 Content
</section>
<section ref={React.createRef()} style={{ height: "80vh", background: "white" }}>
Nav 3 Content
</section>
</StickyScrollSpyNav>3. All possible props.
nav: string[];
children: React.ReactNode[] | any[];
// optional
header?: React.ReactNode;
onClickNav?: (index: number) => void;
offset?: number;
navContainerStyle?: {};
navActiveItemStyle?: {};
navItemStyle?: {};
style?: {};Preview:
