react-smooth-scroll
Smooth Scroll into React components
Minimal class to manage Smooth Scroll into React components based on virtual-scroll, VirtualScroll.js and raf.
Features
- Smooth Scroll on any DOM Node
- Manage easing value
- ES7 Decorator
Installation
npm install -S antoninlanglade/react-smooth-scroll
Example
import SmoothScroll from 'react-smooth-scroll';
// If you want to use decorator
@SmoothScroll.SmoothScrollDecorator
// Else you can setup with more params
export default class Page extends React.Component {
constructor() {
const customEase = 0.1;
}
// ComponentDidMount
componentDidMount() {
SmoothScroll.smoothScrollManager.add(this.refs.component, customEase, this.scrollUpdate);
}
// ComponentWillUnmount
componentWillUnmount() {
SmoothScroll.smoothScrollManager.remove(this.refs.component);
}
// ScrollUpdate with y offset
scrollUpdate(y) {
console.log(y);
}
render() {
return (
<div ref="component">
// Your scrollable content
</div>
)
}
}
Usage
SmoothScroll.smoothScrollManager.add(DOMNode, ease, scrollUpdateFunction)
Add an element into SmoothScrollManager :
DOMNode
required DOMNode
ease
optional Float
scrollUpdateFunction
optional Function
Example:
SmoothScroll.smoothScrollManager.add(this.refs.component, 0.1, (y) => { console.log(y) });
SmoothScroll.smoothScrollManager.remove(DOMNode)
Remove an element from SmoothScrollManager :
DOMNode
required DOMNode
Example:
SmoothScroll.smoothScrollManager.remove(this.refs.component);
SmoothScroll.smoothScrollManager.reset(DOMNode, position)
Reset position of an element on y axis from SmoothScrollManager :
DOMNode
required DOMNode
position
optional Float
Example: ```js SmoothScroll.smoothScrollManager.reset(this.refs.component, 30.0); ```
License
MIT.