RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/keidrun/reactstrap-scrollspy/ below:

keidrun/reactstrap-scrollspy: Scrollspy library for Reactstrap to create an automatically update navigation easily and flexibly.

Scrollspy library for Reactstrap to create an automatically update navigation easily and flexibly.

npm i reactstrap-scrollspy

yarn add reactstrap-scrollspy

This library provides Scrollspy and ScrollspyNavLink components.

You should wrap your components in Scrollspy. This has mainly two props, which are names and homeIndex. names is used to identify each component wrapped by this, so you should give unique names' list that arranged in order. Then, homeIndex is an index number to identify home component such as Header.

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

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

// @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

You should wrap NavLink provided by reactstrap in ScrollspyNavLink. This has an one prop, which is name. name is used to identify a NavLink and notify Scrollspy of it automatically.

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

// @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

React
ReactDOM
Reactstrap

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4