Repository files navigation

React component for anchor links using thesmoothscroll polyfill.

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

2. Add script

   importReactfrom'react'importReactDOMfrom'react-dom'importAnchorLinkfrom'react-anchor-link-smooth-scroll'constSmoothScroll=()=>(<div><AnchorLinkhref='#things'>Things</AnchorLink><AnchorLinkhref='#stuff'>Stuff</AnchorLink><sectionid='things'><h2>Things</h2></section><sectionid='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

     <AnchorLinkoffset='100'href='#things'>Things</AnchorLink>

   • For responsive offset you can provide a function returning the needed integer to scroll from

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

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.

Licensed under theMIT Licence.