React Anchor Link Smooth Scroll

React component for anchor links using the smoothscroll polyfill.

Instructions

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

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

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.

Package detail