Popularity
8.3
Stable
Activity
4.2
Growing
3,577
32
409

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Latest version: v0.0.2

react-scroll alternatives and similar libraries

Based on the "UI Navigation" category.
Alternatively, view react-scroll alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-scroll or a related project?

Add another 'UI Navigation' Library

README

React Scroll

React component for animating vertical scrolling

Install

$ npm install react-scroll

Run

$ npm install
$ npm test
$ npm start

Examples

Checkout examples

Live example

Basic

Basic-Keydown

Container

With-hash

With-overflow

Code

$ npm start

Usage

// ES6 Imports
import * as Scroll from 'react-scroll';
import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'

// Or Access Link,Element,etc as follows
let Link      = Scroll.Link;
let Button    = Scroll.Button;
let Element   = Scroll.Element;
let Events    = Scroll.Events;
let scroll    = Scroll.animateScroll;
let scrollSpy = Scroll.scrollSpy;

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

var Link      = Scroll.Link;
var Button    = Scroll.Button;
var Element   = Scroll.Element;
var Events    = Scroll.Events;
var scroll    = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;

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

    scrollSpy.update();
  },
  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);
  },
  handleSetActive: function(to) {
    console.log(to);
  },
  render: function () {
    return (
      <div>
        <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} onSetActive={this.handleSetActive}>
          Test 1
        </Link>
        <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} delay={1000}>
          Test 2 (delay)
        </Link>
        <Link className="test6" to="anchor" spy={true} smooth={true} duration={500}>
          Test 6 (anchor)
        </Link>
        <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 its targets position

hashSpy Update hash based on spy, containerId has to be set to scroll a specific element

smooth Animate the scrolling

offset Scroll additional px ( like padding )

duration time of the scroll animation - can be a number or a function (function (scrollDistanceInPx) { return duration; }), that allows more granular control at run-time

delay Wait x milliseconds before scroll

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

onSetActive Invoke whenever link is being set to active

onSetInactive Invoke whenever link is lose the active status

ignoreCancelEvents Ignores events which cancel animated scrolling

horizontal Whether to scroll vertically (false) or horizontally (true) - default: false

spyThrottle Time of the spy throttle - can be a number

Full example

<Link activeClass="active"
      to="target"
      spy={true}
      smooth={true}
      hashSpy={true}
      offset={50}
      duration={500}
      delay={1000}
      isDynamic={true}
      onSetActive={this.handleSetActive}
      onSetInactive={this.handleSetInactive}
      ignoreCancelEvents={false}
      spyThrottle={500}
>
  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,
  containerId: 'ContainerElementID',
  offset: 50, // Scrolls to element + 50 pixels down the page
  ...
})

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 ScrollLink    = Scroll.ScrollLink;
var ScrollElement = Scroll.ScrollElement;

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

module.exports = ScrollElement(Element);

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

module.exports = ScrollLink(Link);

Scroll Animations

Add a custom easing animation to the smooth option. This prop will accept a Boolean if you want the default, or any of the animations listed below

scroller.scrollTo('myScrollToElement', {
  duration: 1500,
  delay: 100,
  smooth: 'easeInOutQuint',
  containerId: 'ContainerElementID',
  ...
})

List of currently available animations:

linear
    - no easing, no acceleration.
easeInQuad
    - accelerating from zero velocity.
easeOutQuad
    - decelerating to zero velocity.
easeInOutQuad
    - acceleration until halfway, then deceleration.
easeInCubic
    - accelerating from zero velocity.
easeOutCubic
    - decelerating to zero velocity.
easeInOutCubic
    - acceleration until halfway, then deceleration.
easeInQuart
    - accelerating from zero velocity.
easeOutQuart
    - decelerating to zero velocity.
easeInOutQuart
    -  acceleration until halfway, then deceleration.
easeInQuint
    - accelerating from zero velocity.
easeOutQuint
    - decelerating to zero velocity.
easeInOutQuint
    - acceleration until halfway, then deceleration.

A good visual reference can be found at easings.net

Changelog

  • [See the CHANGELOG](./CHANGELOG.md)