react-sticky-scrollspy-nav is a React component that provides smooth scrolling navigation with sections to a web page.

Overview

react-sticky-scrollspy-nav

npm npm

react-sticky-scrollspy-nav is a 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

Add
tags to StickyScrollSpyNav component. You need to add ref={createRef()} to each section item.

import ScrollSpy from "react-scrollspy-navigation";
<ScrollSpy>
  <section ref={React.createRef()}>...</section>
  <section ref={React.createRef()}>...</section>
  <section ref={React.createRef()}>...</section>
</ScrollSpy>

Add nav props to render nav component.

... ">
<StickyScrollSpyNav nav={["Nav1", "Nav2", "Nav3"]}>...</StickyScrollSpyNav>

Example Code.

Nav 1 Content
Nav 2 Content
Nav 3 Content
">
<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: "70vh", background: "orange" }}>
    Nav 1 Content
  </section>
  <section ref={React.createRef()} style={{ height: "70vh", background: "blue" }}>
    Nav 2 Content
  </section>
  <section ref={React.createRef()} style={{ height: "70vh", background: "green" }}>
    Nav 3 Content
  </section>
</StickyScrollSpyNav>

Props

Common props you may want to specify include:

Properties PropType Description
nav string[] (Required) navigation names with button tag
header React.ReactNode header component
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)

Owner
huurray
Front-End Developer.
huurray
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Sponsors The following wonderful compan

Brian Vaughn 22.6k Oct 14, 2021
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks

React Recycled Scrolling Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks Install npm in

sarons 24 Sep 2, 2021
A simple hook to create infinite scroll list components

react-infinite-scroll-hook This is a hook to create infinite scroll components! Live demo is here. Basically, we need to set a sentry component to tri

Onur ├ľnder 235 Oct 13, 2021
An awesome Infinite Scroll component in react.

react-infinite-scroll-component A component to make all your infinite scrolling woes go away with just 4.15 kB! Pull Down to Refresh feature added. An

Ankeet Maini 1.6k Oct 13, 2021
:scroll: A versatile infinite scroll React component.

ReactList A versatile infinite scroll React component. Install bower install react-list # or npm install react-list ReactList depends on React. Exam

Casey Foster 1.9k Oct 14, 2021
Lazy load your component, image or anything matters the performance.

Note This project is now currently maintained by @ameerthehacker, please reach out to him on any issues or help. react-lazyload Lazyload your Componen

twobin 5.4k Oct 14, 2021