react-scrollspy-animate
v0.1.3
Published
https://github.com/Artrogeno/react-scrollspy-animate
Downloads
13
Readme
https://github.com/Artrogeno/react-scrollspy-animate
Scrollspy Animate Component Demo
Install
$ yarn add react-scrollspy-animateUsage
import Scrollspy from 'react-scrollspy-animate'
...Properties
Scrollspy.propTypes = {
tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
componentClass: PropTypes.string,
scrolledPastClassName: PropTypes.string,
active: PropTypes.string,
level: PropTypes.number,
offset: PropTypes.number,
timeout: PropTypes.number,
rootEl: PropTypes.string,
animete: PropTypes.object,
onUpdate: PropTypes.func
}Exemple
Default
<body>
<Scrollspy>
<li>
<a href="#section-1">Section 1</a>
</li>
<li>
<a href="#section-2">Section 2</a>
</li>
<li>
<a href="#section-3">Section 3</a>
</li>
</Scrollspy>
<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>
</body>Level 1 ( tag --> a )
<Scrollspy level={1} >
<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
<a href="#section-3">Section 3</a>
</Scrollspy>Level 2 ... ( tag --> li > a )
<Scrollspy level={2} >
<li>
<a href="#section-1">Section 1</a>
</li>
<li>
<a href="#section-2">Section 2</a>
</li>
<li>
<a href="#section-3">Section 3</a>
</li>
</Scrollspy>Active ( default ==> class="active" )
<Scrollspy active="nav-active" >
<li>
<a href="#section-1">Section 1</a>
</li>
<li class="nav-active"> <!--- Scroll Activite ---->
<a href="#section-2">Section 2</a>
</li>
<li>
<a href="#section-3">Section 3</a>
</li>
</Scrollspy>Animate & Timeout from Mozilla (scrollIntoView)
// --> Animete
// <Scrollspy animate={ behavior: 'smooth', block: 'start' } >
{
behavior: "auto" | "instant" | "smooth",
block: "start" | "end",
}
// --> Set hash your browser in 500 milliseconds
// <Scrollspy timeout={500} >
setTimeout(() => {
window.location.hash = '#section-2'
}, timeout);