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
Installation
yarn add scroll-provider
or
npm install --save scroll-provider
Usage
- Import component
- Wrap the main component
<ScrollProvider> <div ="App"> ...app content... </div></ScrollProvider>
- Now all components have access to the scroll information
- You can use
useContext
hook
import React useContext from "react";import ScrollContext from "../ScrollProvider"; const Component = const scrollPosition isScrolling = ; return <div> scrollPosition - isScrolling ? "scrolling" : "idle" </div> ;; ;
- 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>; ;