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
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