Skip to content
This repository has been archived by the owner on Apr 26, 2024. It is now read-only.

EverFi/react-scroll

This branch is 241 commits behind fisshy/react-scroll:master.

Folders and files

NameName
Last commit message
Last commit date
Jul 21, 2016
Jul 14, 2016
Jul 21, 2016
May 10, 2016
Mar 2, 2015
Jul 14, 2016
Mar 3, 2015
Oct 17, 2015
Jul 14, 2016
Apr 13, 2016

Repository files navigation

React Scroll

Directive for basic scrolling and smooth scrolling.

Install

$ npm install react-scroll

Run

$ npm install
$ npm test
$ 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 DirectLink = Scroll.DirectLink;
var Element    = Scroll.Element;
var Events     = Scroll.Events;
var scroll     = Scroll.animateScroll;

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

  },
  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);
  },
  render: function () {
  	return (
      <div>
        <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} >
          Test 1
        </Link>
        <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} delay={1000}>
          Test 2 (delay)
        </Link>
        <DirectLink className="test6" to="anchor" spy={true} smooth={true} duration={500}>
          Test 6 (anchor)
        </DirectLink>
        <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

activeClass - class applied when element is reached

to - target to scroll to

containerId - container to listen for scroll events and to perform scrolling in

spy - make Link selected when scroll is at it's targets position

smooth - animate the scrolling

offset - scroll additional px ( like padding )

duration - time of the scroll animation

delay - wait x seconds before scroll

isDynamic - in case the distance has to be recalculated - if you have content that expands etc.

<Link activeClass="active"
      to="target"
      spy={true}
      smooth={true}
      offset={50}
      duration={500}
      delay={1000}
      isDynamic={true}
>
  Your name
</Link>

Scroll Methods

Scroll To Top

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

scroll.scrollToTop(options);

Scroll To Bottom

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

scroll.scrollToBottom(options);

Scroll To (position)

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

scroll.scrollTo(100, options);

Scroll To (Element)

animateScroll.scrollTo(positionInPixels, props = {});

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

Scroll More (px)

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

scroll.scrollMore(10, options);

Scroll events

begin - start of the scrolling

var Scroll = require('react-scroll');
var Events = Scroll.Events;

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

end - end of the scrolling/animation

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

Remove events

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

Create your own Link/Element

Simply just pass your component to one of the high order components (Element/Scroll)

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

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

module.exports = Helpers.Element(Element);

var Link = React.createClass({
  render: function () {
    return (
      <a>
        {this.props.children}
      </a>
    );
  }
});

module.exports = Helpers.Scroll(Link);

Changelog

v1.0.24

  • you can now pass any native property to Link/Element
  • patched minor bugs from v1.0.21 > v1.0.24

v1.0.21

  • scrollToBottom and scrollMore now works inside a container.

v1.0.20

  • Published, somehow the publish failed

v1.0.19

  • Property warnings has now been removed.

v1.0.18

  • It's now possible to scroll within a container, checkout the code under examples.

v1.0.17

  • isDynamic property has been added. To allow scrollSpy to recalculate components that expand

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

  • Being able to use react-scroll within a div.
  • Integrate react-scroll with react-router
  • Hash-scrolling.

Packages

No packages published

Languages

  • JavaScript 100.0%