0.2.7 • Published 9 years ago
react-router-hash-scroll v0.2.7
DEPRECATED - This package is deprecated in favor of: react-scrollchor
react-router-hash-scroll
A React component for animate scroll to #hash on page link.
Installation
$ npm install react-router-hash-scroll --saveUsage
import { HashLink } from "react-router-hash-scroll";
export default (props) => (
<Page>
<Head />
<div id="home" />
<Navbar brand={brand} className="navbar-fixed-top">
<NavItem><HashLink to="#home" className="nav-link">Home</HashLink></NavItem>
<NavItem><HashLink to="#sample-code" className="nav-link">Sample</HashLink></NavItem>
<NavItem><HashLink to="#features" className="nav-link">Features</HashLink></NavItem>
<NavItem><HashLink to="#signup" className="nav-link">SignUp</HashLink></NavItem>
</Navbar>
....
<Section id="sample-code">
....
</Section>
<Section id="features">
....
</Section>
<Section id="signup">
....
</Section>
</Page>Custom animation
Animate behavior can be customize per each #hash link.
Ex:
<HashLink to="#aboutus" animate={{ offset: 20, duration: 600 }} className="nav-link">Home</HashLink>default animation
{ offset: 0, duration: 400, easing: easeOutQuad }This setting is equivalent to default jQuery.animate easing: swing
Easing functions links
component HashLinkHistory
This component support browser History #hash link navigation.
LICENSE
MIT