Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567



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 i react-sticky-scrollspy-nav
import StickyScrollSpyNav from "react-sticky-scrollspy-nav";

2. Add nav items and corresponding sections to the <StickyScrollSpyNav /> component.

      <h1>Header content</h1>
      <h1>Header content</h1>
      <h1>Header content</h1>
  nav={["Nav1", "Nav2", "Nav3"]}
  navActiveItemStyle={{ color: "red" }}
  <section ref={React.createRef()} style={{ height: "80vh", background: "dark" }}>
    Nav 1 Content
  <section ref={React.createRef()} style={{ height: "80vh", background: "grey" }}>
    Nav 2 Content
  <section ref={React.createRef()} style={{ height: "80vh", background: "white" }}>
    Nav 3 Content

3. All possible props.

nav: string[];
children: React.ReactNode[] | any[];
// optional
header?: React.ReactNode;
onClickNav?: (index: number) => void;
offset?: number;
navContainerStyle?: {};
navActiveItemStyle?: {};
navItemStyle?: {};
style?: {};


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

Credit: Source link

Previous Next
Test Caption
Test Description goes like this