React Scroll

React component for animating vertical scrolling

Install

$ npm install react-scroll

or

$ yarn add react-scroll

Run

$ npm install
$ npm test
$ npm start

or

$ yarn
$ yarn test
$ yarn start

Examples

Checkout examples

Live example

> Basic

> Basic-Keydown

> Container

> With-hash

> With-overflow

> Code

Usage

import React, { useEffect } from 'react';
import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy } from 'react-scroll';

const Section = () => {

  // useEffect is used to perform side effects in functional components.
  // Here, it's used to register scroll events and update scrollSpy when the component mounts.
  useEffect(() => {
    
    // Registering the 'begin' event and logging it to the console when triggered.
    Events.scrollEvent.register('begin', (to, element) => {
      console.log('begin', to, element);
    });

    // Registering the 'end' event and logging it to the console when triggered.
    Events.scrollEvent.register('end', (to, element) => {
      console.log('end', to, element);
    });

    // Updating scrollSpy when the component mounts.
    scrollSpy.update();

    // Returning a cleanup function to remove the registered events when the component unmounts.
    return () => {
      Events.scrollEvent.remove('begin');
      Events.scrollEvent.remove('end');
    };
  }, []);

  // Defining functions to perform different types of scrolling.
  const scrollToTop = () => {
    scroll.scrollToTop();
  };

  const scrollToBottom = () => {
    scroll.scrollToBottom();
  };

  const scrollTo = () => {
    scroll.scrollTo(100); // Scrolling to 100px from the top of the page.
  };

  const scrollMore = () => {
    scroll.scrollMore(100); // Scrolling an additional 100px from the current scroll position.
  };

  // Function to handle the activation of a link.
  const handleSetActive = (to) => {
    console.log(to);
  };

  // Rendering the component's JSX.
  return (
  </p><div>
    {/* Link component to scroll to "test1" element with specified properties */}
    
      Test 1
    

    {/* Other Link and Button components for navigation, each with their unique properties and targets */}
    {/* ... */}

    {/* Element components that act as scroll targets */}
    <element name="test1">
      test 1
    </element>
    <element name="test2">
      test 2
    </element>
    <div id="anchor">
      test 6 (anchor)
    </div>

    {/* Links to elements inside a specific container */}
    
      Go to first element inside container
    
    
      Go to second element inside container
    

    {/* Container with elements inside */}
    <div id="containerElement">
      <element name="firstInsideContainer">
        first element inside container
      </element>
      <element name="secondInsideContainer">
        second element inside container
      </element>
    </div>

    {/* Anchors to trigger scroll actions */}
    <a>To the top!</a>
    <br>
    <a>To the bottom!</a>
    <br>
    <a>Scroll to 100px from the top</a>
    <br>
    <a>Scroll 100px more from the current position!</a>
  </div>
);

};

export default Section;

Props/Options

Full example

  Your name

Scroll Methods

> Scroll To Top

import { animateScroll } from 'react-scroll';

const options = {
  // your options here, for example:
  duration: 500,
  smooth: true,
};

animateScroll.scrollToTop(options);

> Scroll To Bottom

import { animateScroll } from 'react-scroll';

const options = {
  // Your options here, for example:
  duration: 500,
  smooth: true,
};

animateScroll.scrollToBottom(options);

> Scroll To (position)

import { animateScroll } from 'react-scroll';

const options = {
  // Your options here, for example:
  duration: 500,
  smooth: true,
};

// Scroll to 100 pixels from the top of the page
animateScroll.scrollTo(100, options);

> Scroll To (Element)

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

import { Element, scroller } from 'react-scroll';

<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
  // ... other options
});

> Scroll More (px)

import { animateScroll } from 'react-scroll';

const options = {
  // Your options here, for example:
  duration: 500,
  smooth: true,
};

// Scroll an additional 10 pixels down from the current scroll position
animateScroll.scrollMore(10, options);

Scroll events

> begin - start of the scrolling

import { Events } from 'react-scroll';

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

> end - end of the scrolling/animation

import { Events } from 'react-scroll';

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

> Remove events

import { Events } from 'react-scroll';

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)

import React from 'react';
import { ScrollElement, ScrollLink } from 'react-scroll';

const Element = (props) => {
  return (
    <div> { props.parentBindings.domNode = el; }}&gt;
      {props.children}
    </div>
  );
};

export const ScrollableElement = ScrollElement(Element);

const Link = (props) =&gt; {
  return (
    <a>
      {props.children}
    </a>
  );
};

export const ScrollableLink = 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

import { scroller } from 'react-scroll';

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

> 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