@synapsestudios/react-scroll

React Scroll

Directive for basic scrolling and smooth scrolling. Forked from https://github.com/fisshy/react-scroll to give us tighter control over npm and git release versions. We'll peridocially pull updates and will submit PRs for any bugfixes we find.

Requires React 14, for React 13 or below, use 0.3.3

Install

$ npm install @synapsestudios/react-scroll

Run

$ npm install
$ npm run examples

Examples

Checkout examples

Basic

Live Or Code

Usage

var React = require('react');
var Scroll = require('@synapsestudios/react-scroll');

var Link = Scroll.Link;
var Element = Scroll.Element;

var Section = React.createClass({
  render: function () {
  	return (
  		<Link to="test1" spy={true} smooth={true} offset={50} duration={500} >Test 1</Link>
		<Button 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>
	);
  }
});

React.render(
  <Section />,
  document.getElementById('example')
);

Create your own Link/Element

Simply just include the mixins!

var React = require('react');
var Scroll = require('@synapsestudios/react-scroll');
var Helpers = Scroll.Helpers;

var Element = React.createClass({
  mixins: [Helpers.Element],
  render: function () {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
});

var Link = React.createClass({
  mixins: [Helpers.Scroll],
  render: function () {
    return (
      <a onClick={this.onClick}>
        {this.props.children}
      </a>
    );
  }
});

Todo

• [x] Vertical scrolling
• [x] Scroll to element
• [x] Smooth scroll animation
• [x] Live examples
• [x] Pass scroll/animation duration as settings
• [ ] Horizontal scrolling
• [x] Spy on scrolling/Highlight
• [ ] Write test