Neverending Pile of Messages

    react-scroll
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-scroll package

    1.8.7 • Public • Published

    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

    Install

    npm i react-scroll

    DownloadsWeekly Downloads

    455,344

    Version

    1.8.7

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    27

    Last publish

    Collaborators

    • fisshy