React Scroll
React component for animating vertical scrolling
Install
$ npm install react-scrollRun
$ npm install
$ npm test
$ npm startExamples
Checkout examples
Live example
$ npm startUsage
// ES6 Imports
import * as Scroll from 'react-scroll';
import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
// Or Access Link,Element,etc as follows
let Link = Scroll.Link;
let Button = Scroll.Button;
let Element = Scroll.Element;
let Events = Scroll.Events;
let scroll = Scroll.animateScroll;
let scrollSpy = Scroll.scrollSpy;
// ES5
var React = require('react');
var Scroll = require('react-scroll');
var Link = Scroll.Link;
var Button = Scroll.Button;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scroll = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;
var Section = React.createClass({
componentDidMount: function() {
Events.scrollEvent.register('begin', function(to, element) {
console.log('begin', arguments);
});
Events.scrollEvent.register('end', function(to, element) {
console.log('end', arguments);
});
scrollSpy.update();
},
componentWillUnmount: function() {
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
},
scrollToTop: function() {
scroll.scrollToTop();
},
scrollToBottom: function() {
scroll.scrollToBottom();
},
scrollTo: function() {
scroll.scrollTo(100);
},
scrollMore: function() {
scroll.scrollMore(100);
},
handleSetActive: function(to) {
console.log(to);
},
render: function () {
return (
<div>
<Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} onSetActive={this.handleSetActive}>
Test 1
</Link>
<Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} delay={1000}>
Test 2 (delay)
</Link>
<Link className="test6" to="anchor" spy={true} smooth={true} duration={500}>
Test 6 (anchor)
</Link>
<Button activeClass="active" className="btn" type="submit" value="Test 2" to="test2" spy={true} smooth={true} offset={50} duration={500} >
Test 2
</Button>
<Element name="test1" className="element">
test 1
</Element>
<Element name="test2" className="element">
test 2
</Element>
<div id="anchor" className="element">
test 6 (anchor)
</div>
<Link to="firstInsideContainer" containerId="containerElement">
Go to first element inside container
</Link>
<Link to="secondInsideContainer" containerId="containerElement">
Go to second element inside container
</Link>
<div className="element" id="containerElement">
<Element name="firstInsideContainer">
first element inside container
</Element>
<Element name="secondInsideContainer">
second element inside container
</Element>
</div>
<a onClick={this.scrollToTop}>To the top!</a>
<br/>
<a onClick={this.scrollToBottom}>To the bottom!</a>
<br/>
<a onClick={this.scrollTo}>Scroll to 100px from the top</a>
<br/>
<a onClick={this.scrollMore}>Scroll 100px more from the current position!</a>
</div>
);
}
});
React.render(
<Section />,
document.getElementById('example')
);Props/Options
| activeClass | class applied when element is reached |
| activeStyle | style applied when element is reached |
| to | Target to scroll to |
| containerId | Container to listen for scroll events and to perform scrolling in |
| spy | Make Link selected when scroll is at its targets position |
| hashSpy | Update hash based on spy, containerId has to be set to scroll a specific element |
| smooth | Animate the scrolling |
| offset | Scroll additional px ( like padding ) |
| duration | time of the scroll animation - can be a number or a function (`function (scrollDistanceInPx) { return duration; }`), that allows more granular control at run-time |
| delay | Wait x milliseconds before scroll |
| isDynamic | In case the distance has to be recalculated - if you have content that expands etc. |
| onSetActive | Invoke whenever link is being set to active |
| onSetInactive | Invoke whenever link is lose the active status |
| ignoreCancelEvents | Ignores events which cancel animated scrolling |
| horizontal | Whether to scroll vertically (`false`) or horizontally (`true`) - default: `false` |
| spyThrottle | Time of the spy throttle - can be a number |
Full example
<Link activeClass="active"
to="target"
spy={true}
smooth={true}
hashSpy={true}
offset={50}
duration={500}
delay={1000}
isDynamic={true}
onSetActive={this.handleSetActive}
onSetInactive={this.handleSetInactive}
ignoreCancelEvents={false}
spyThrottle={500}
>
Your name
</Link>Scroll Methods
Scroll To Top
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollToTop(options);Scroll To Bottom
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollToBottom(options);Scroll To (position)
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollTo(100, options);Scroll To (Element)
animateScroll.scrollTo(positionInPixels, props = {});
var Scroll = require('react-scroll');
var Element = Scroll.Element;
var scroller = Scroll.scroller;
<Element name="myScrollToElement"></Element>
// Somewhere else, even another file
scroller.scrollTo('myScrollToElement', {
duration: 1500,
delay: 100,
smooth: true,
containerId: 'ContainerElementID',
offset: 50, // Scrolls to element + 50 pixels down the page
...
})Scroll More (px)
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollMore(10, options);Scroll events
begin - start of the scrolling
var Scroll = require('react-scroll');
var Events = Scroll.Events;
Events.scrollEvent.register('begin', function(to, element) {
console.log('begin', to, element);
});end - end of the scrolling/animation
Events.scrollEvent.register('end', function(to, element) {
console.log('end', to, element);
});Remove events
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');Create your own Link/Element
Simply just pass your component to one of the high order components (Element/Scroll)
var React = require('react');
var Scroll = require('react-scroll');
var ScrollLink = Scroll.ScrollLink;
var ScrollElement = Scroll.ScrollElement;
var Element = React.createClass({
render: function () {
return (
<div {...this.props} ref={(el) => { this.props.parentBindings.domNode = el; }}>
{this.props.children}
</div>
);
}
});
module.exports = ScrollElement(Element);
var Link = React.createClass({
render: function () {
return (
<a {...this.props}>
{this.props.children}
</a>
);
}
});
module.exports = ScrollLink(Link);Scroll Animations
Add a custom easing animation to the smooth option. This prop will accept a Boolean if you want the default, or any of the animations listed below
scroller.scrollTo('myScrollToElement', {
duration: 1500,
delay: 100,
smooth: 'easeInOutQuint',
containerId: 'ContainerElementID',
...
})List of currently available animations:
linear
- no easing, no acceleration.
easeInQuad
- accelerating from zero velocity.
easeOutQuad
- decelerating to zero velocity.
easeInOutQuad
- acceleration until halfway, then deceleration.
easeInCubic
- accelerating from zero velocity.
easeOutCubic
- decelerating to zero velocity.
easeInOutCubic
- acceleration until halfway, then deceleration.
easeInQuart
- accelerating from zero velocity.
easeOutQuart
- decelerating to zero velocity.
easeInOutQuart
- acceleration until halfway, then deceleration.
easeInQuint
- accelerating from zero velocity.
easeOutQuint
- decelerating to zero velocity.
easeInOutQuint
- acceleration until halfway, then deceleration.
A good visual reference can be found at easings.net