react-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 <section> 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>

2. Add nav props to render nav component.

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

Example Code.

<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 | 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)