lalala/react-scroll

React scroll component

React Scroll

Directive for basic scrolling and smooth scrolling ( work in progress ) Feel free to contribute - everything is appreciated

Install

$ npm install react-scroll

Run

$ npm install
$ npm run examples

Examples

Checkout examples

Basic

Live Or Code

Usage

var React = require('react');
var Scroll = require('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('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

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