@foo-software/react-scroll-context
v0.0.27
A React scroll context provider and consumer for detecting scroll position (scrollX, scrollY) and providing that data to child components.
7/weekUpdated 3 years agoMITUnpacked: 14.8 KB
Published by Adam Henson
npm install @foo-software/react-scroll-context@foo-software/react-scroll-context
> React Scroll Context exports a React context provider and consumer. It provides window scroll data to a consumer.
Install
> npm
``
npm install @foo-software/react-scroll-context
> yarn
`
yarn add @foo-software/react-scroll-context
Dependencies
- react@16.8
Props
| Name | Description | PropType | Required | Default |
|---|---|---|---|---|
Context | A Context object created by React.createContext() | object | true | -- |
children | Anything that can be rendered, but typically a tree of elements. Scroll data can be consumed from anywhere in this tree. | node | true | -- |
scrollContainer | A scroll container. This will be window by default, but you could use an element instead with this option. | oneOf[PropTypes.object, PropTypes.node] | false | window |
throttleTime | Time in milleseconds to throttle calculations of scroll. | number | false | 200 |
Exposed Context Consumer Data
| Name | Description | Type |
|---|---|---|
scrollX | The current value of window.scrollX. | number |
scrollY | The current value of window.scrollY. | number |
isScrollingDown | Identifies whether or not scroll direction is down. | boolean |
Usage
> Standard
`jsx
import React from 'react';
import { ScrollProvider } from '@foo-software/react-scroll-context';
// replace scroll-context any name you like.
const Context = React.createContext('scroll-context');
const ScrollDisplay = () => (
>
Scroll it!
{({ scrollX, scrollY, isScrollingDown }) => (
scrollX: {scrollX}
scrollY: {scrollY}
isScrollingDown: {isScrollingDown ? 'yes' : 'no'}
)}
);
`
> Class
jsx
import React, { Component } from 'react';
import { ScrollProvider } from '@foo-software/react-scroll-context';// replace
scroll-context any name you like.
const Context = React.createContext('scroll-context');class ScrollDisplay extends Component {
static contextType = Context;
render() {
const { scrollX, scrollY, isScrollingDown } = this.context;
return (
scrollX: {scrollX}
scrollY: {scrollY}
isScrollingDown: {isScrollingDown ? 'yes' : 'no'}
);
}
}const App = () => (
>
Scroll it!
);
` hook`jsx
import React, { useContext } from 'react';
import { ScrollProvider } from '@foo-software/react-scroll-context';// replace
scroll-context any name you like.
const Context = React.createContext('scroll-context');const ScrollDisplay = () => {
const { scrollX, scrollY, isScrollingDown } = useContext(Context);
return (
scrollX: {scrollX}
scrollY: {scrollY}
isScrollingDown: {isScrollingDown ? 'yes' : 'no'}
);
};const App = () => (
>
Scroll it!
);
``Credits
> 
This package was brought to you by Foo - a website performance monitoring tool. Create a free account with standard performance testing. Automatic website performance testing, uptime checks, charts showing performance metrics by day, month, and year. Foo also provides real time notifications when performance and uptime notifications when changes are detected. Users can integrate email, Slack and PagerDuty notifications.