React Scroll Provider

React component that passes scrolling data through the component tree.

Available information are:

• scrollPosition (number): current scrollY,
• isScrolling (boolean): user is scrolling the page

DEMO (CodeSandbox)

Installation

yarn add scroll-provider

or

npm install --save scroll-provider

Usage

• Import component

import ScrollProvider from 'scroll-provider'

• Wrap the main component

<ScrollProvider>
  <div className="App">
   ...app content...
  </div>
</ScrollProvider>

• Now all components have access to the scroll information

1. You can use useContext hook

import React, { useContext } from "react";
import { ScrollContext } from "../ScrollProvider";

const Component = () => {
  const { scrollPosition, isScrolling } = useContext(ScrollContext);

  return (
    <div>
      {scrollPosition} - {isScrolling ? "scrolling" : "idle"}
    </div>
  );
};

export default Component;

2. or the Context API

import React from "react";
import { ScrollContext } from "../ScrollProvider";

const Component = () => (
  <ScrollsContext.Consumer>
    {({ scrollPosition, isScrolling }) => (
      <div>
        {scrollPosition} - {isScrolling ? "scrolling" : "idle"}
      </div>
    )}
  </ScrollsContext.Consumer>
);

export default ScrollPosition;