React Scroll

Install

$ npm install react-scroll

Run

$ npm install
$ npm test
$ npm run examples

Examples

Usage

// ES6 Imports
import Scroll from 'react-scroll'; // Imports all Mixins
import {scroller} from 'react-scroll'; //Imports scroller mixin, can use as scroller.scrollTo()
// Or Access Link,Element,etc as follows
let Link = Scroll.Link;
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 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

<Link activeClass="active"
 to="target"
 spy={true}
 smooth={true}
 offset={50}
 duration={500}
 delay={1000}
 isDynamic={true}
 onSetActive={this.handleSetActive}
 onSetInactive={this.handleSetInactive}
 ignoreCancelEvents={false}
>
 Your name
</Link>

Scroll Methods

var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollToTop(options);

var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollToBottom(options);

var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollTo(100, options);

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
 ...
})

var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
scroll.scrollMore(10, options);

Scroll events

var Scroll = require('react-scroll');
var Events = Scroll.Events;
Events.scrollEvent.register('begin', function(to, element) {
 console.log("begin", to, element);
});

Events.scrollEvent.register('end', function(to, element) {
 console.log("end", to, element);
});

Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');

Create your own Link/Element

var React = require('react');
var Scroll = require('react-scroll');
var Helpers = Scroll.Helpers;
var Element = React.createClass({
 render: function () {
 return (
 <div {...this.props}>
 {this.props.children}
 </div>
 );
 }
});
module.exports = Helpers.Element(Element);
var Link = React.createClass({
 render: function () {
 return (
 <a {...this.props}>
 {this.props.children}
 </a>
 );
 }
});
module.exports = Helpers.Scroll(Link);

Scroll Animations

scroller.scrollTo('myScrollToElement', {
 duration: 1500,
 delay: 100,
 smooth: "easeInOutQuint",
 containerId: 'ContainerElementID',
 ...
})

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.

Changelog

Things that needs to be done - feel free to contribute.