JSPM – react-scroll@0.10.0

Package Exports

react-scroll

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-scroll) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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" smooth={true} duration={2000} >Test 1</Link>
          <Link to="test2" smooth={true}>Test 2</Link>

          <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} href="test">
        {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