Demo codes for reactstrap-scrollspy

Scrollspy_default.js

Scrollspy.defaultProps = {
  homeIndex: 0,
  topOffset: '50%',
  bottomOffset: '40%',
  delayMs: 50,
}

Scrollspy_example.js

// @flow
import React from 'react'

import { Scrollspy } from 'reactstrap-scrollspy'
...

function App() {
  return (
    <>
      <Scrollspy
        names={['navbar', 'header', 'section-1', 'section-2', 'section-3', null]}
        homeIndex={1}
      >
        <Navbar />
        <Header />
        <Section1 />
        <Section2 />
        <Section3 />
        <Footer />
      </Scrollspy>
    </>
  )
}

export default App

Scrollspy_props.js

type Props = {
  names: Array<string | null>,
  homeIndex?: number,
  topOffset?: string | number,
  bottomOffset?: string | number,
  delayMs?: number,
  children: ChildrenArray<any>,
}

ScrollspyNavLink_example.js

// @flow
import React, { useState } from 'react'
import { Collapse, Navbar as ReactstrapNavbar, NavbarToggler, Nav, NavItem, NavLink } from 'reactstrap'

import { ScrollspyNavLink } from 'reactstrap-scrollspy'

function Navbar() {
  ...
  return (
    <ReactstrapNavbar expand="md" fixed="top" className="...">
      ...
        <Nav navbar className="...">
          <NavItem>
            <ScrollspyNavLink name="header">
              <NavLink href="#header">Home</NavLink>
            </ScrollspyNavLink>
          </NavItem>
          <NavItem>
            <ScrollspyNavLink name="section-1">
              <NavLink href="#section-1">Section1</NavLink>
            </ScrollspyNavLink>
          </NavItem>
          <NavItem>
            <ScrollspyNavLink name="section-2">
              <NavLink href="#section-2">Section2</NavLink>
            </ScrollspyNavLink>
          </NavItem>
          <NavItem>
            <ScrollspyNavLink name="section-3">
              <NavLink href="#section-3">Section3</NavLink>
            </ScrollspyNavLink>
          </NavItem>
        </Nav>
      ...
    </ReactstrapNavbar>
  )
}

export default Navbar

ScrollspyNavLink_props.js

type Props = {
  name: string,
  children: Element<any>,
}