Sticky Scrollspy Navigation For React

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:

Download Details:

Author: huurray

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/huurray/react-sticky-scrollspy-nav

License: MIT