react-scroll

What is react-scroll?

The react-scroll package provides smooth scrolling functionality for React applications. It allows developers to create scrollable components and implement smooth scrolling animations to specific elements within a page.

What are react-scroll's main functionalities?

Smooth Scrolling to Elements

This feature allows you to create links that smoothly scroll to specific elements on the page. The 'Link' component is used to create the scrollable link, and the 'Element' component is used to define the target section.

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

function App() {
  return (
    <div>
      <Link to="section1" smooth={true} duration={500}>Go to Section 1</Link>
      <Element name="section1" className="element">
        Section 1
      </Element>
    </div>
  );
}

Scroll Events

This feature allows you to register and handle scroll events. You can log or perform actions when scrolling begins or ends. The 'animateScroll' function can be used to programmatically scroll to specific positions.

import { Events, animateScroll as scroll, scroller } from 'react-scroll';

function App() {
  useEffect(() => {
    Events.scrollEvent.register('begin', function() {
      console.log('begin', arguments);
    });

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

    return () => {
      Events.scrollEvent.remove('begin');
      Events.scrollEvent.remove('end');
    };
  }, []);

  return (
    <div>
      <button onClick={() => scroll.scrollToTop()}>Scroll to Top</button>
    </div>
  );
}

Scroll to Top

This feature provides a simple way to scroll to the top of the page programmatically. The 'scrollToTop' function from 'animateScroll' is used to achieve this.

import { animateScroll as scroll } from 'react-scroll';

function App() {
  return (
    <div>
      <button onClick={() => scroll.scrollToTop()}>Scroll to Top</button>
    </div>
  );
}

Other packages similar to react-scroll

react-router-hash-link

The react-router-hash-link package provides smooth scrolling to hash links within a React Router application. It integrates with React Router to enable smooth scrolling to elements identified by hash links. Compared to react-scroll, it is more focused on hash-based navigation within React Router.

react-scrollable-anchor

The react-scrollable-anchor package allows for smooth scrolling to anchor links within a React application. It provides a simple API to create scrollable anchor links. Compared to react-scroll, it is more focused on anchor-based navigation and does not provide as many customization options.

react-scrollspy

The react-scrollspy package provides scrollspy functionality for React applications. It allows you to highlight navigation links based on the current scroll position. Compared to react-scroll, it focuses on tracking scroll positions and updating navigation links accordingly.

README

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 (
  <div>
    {/* Link component to scroll to "test1" element with specified properties */}
    <Link 
      activeClass="active" 
      to="test1" 
      spy={true} 
      smooth={true} 
      offset={50} 
      duration={500} 
      onSetActive={handleSetActive}
    >
      Test 1
    </Link>

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

    {/* Element components that act as scroll targets */}
    <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>

    {/* Links to elements inside a specific container */}
    <Link to="firstInsideContainer" containerId="containerElement">
      Go to first element inside container
    </Link>
    <Link to="secondInsideContainer" containerId="containerElement">
      Go to second element inside container
    </Link>

    {/* Container with elements inside */}
    <div className="element" 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 onClick={scrollToTop}>To the top!</a>
    <br/>
    <a onClick={scrollToBottom}>To the bottom!</a>
    <br/>
    <a onClick={scrollTo}>Scroll to 100px from the top</a>
    <br/>
    <a onClick={scrollMore}>Scroll 100px more from the current position!</a>
  </div>
);

};

export default Section;

Props/Options

activeClass	class applied when element is reached
activeStyle	style 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

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} ref={(el) => { props.parentBindings.domNode = el; }}>
      {props.children}
    </div>
  );
};

export const ScrollableElement = ScrollElement(Element);

const Link = (props) => {
  return (
    <a {...props}>
      {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