Naughty Pinching Mannequins
    Wondering what’s next for npm?Check out our public roadmap! »

    react-anchor-link-smooth-scroll
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-anchor-link-smooth-scroll package

    1.0.12 • Public • Published

    React Anchor Link Smooth Scroll

    React component for anchor links using the smoothscroll polyfill.

    Instructions

    1. Install dependency: npm install react-anchor-link-smooth-scroll

    2. Add script

      import React from 'react'
      import ReactDOM from 'react-dom'
      import AnchorLink from 'react-anchor-link-smooth-scroll'
       
      const SmoothScroll = () => (
        <div>
          <AnchorLink href='#things'>Things</AnchorLink>
          <AnchorLink href='#stuff'>Stuff</AnchorLink>
       
          <section id='things'>
            <h2>Things</h2>
          </section>
          <section id='stuff'>
            <h2>Stuff</h2>
          </section>
        </div>
      )
       
      ReactDOM.render(
        <SmoothScroll />,
        document.getElementById('content')
      )
    3. Options; offset the amount of pixels from the top, for if you have a sticky navigation.

      • Regular offset

         <AnchorLink offset='100' href='#things'>Things</AnchorLink>
      • For responsive offset you can provide a function returning the needed integer to scroll from

         <AnchorLink offset={() => 100} href='#things'>Things</AnchorLink>

    Changelog

    v.1.0.12 (February 5th 2019) @vai0 Modifies how the distance from the top of the page to the anchor element is calculated.

    v.1.0.11 (July 24th 2018), @ericmasiello Fixed; offset prop from being spread, to avoid remaining props spread to anchor link element.

    v1.0.10 (May 30th 2018), @DanMMX Created an option to receive a function for an offset calculation.

    v1.0.9 (April 24th 2018), @gazpachu Fix to have hash change in address bar.

    v1.0.7 (April 10th 2018), @zauni Fixed problem with nested HTML inside the anchor.

    @roborourke Fixed possibility of a custom onClick handler for secondary side effects.

    Licence

    Licensed under the MIT Licence.

    Install

    npm i react-anchor-link-smooth-scroll

    DownloadsWeekly Downloads

    16,723

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    32.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar