react-sticky-scrollspy-nav
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    react-sticky-scrollspy-nav

    npm npm

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

    video

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

    Install

    npm i react-sticky-scrollspy-nav

    DownloadsWeekly Downloads

    22

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    3.06 MB

    Total Files

    37

    Last publish

    Collaborators

    • huurray