https://github.com/foo-software/react-scroll-context
A React scroll context provider and consumer for detecting scroll position (scrollX, scrollY) and providing that data to child components.
https://github.com/foo-software/react-scroll-context
Last synced: 10 months ago
JSON representation
A React scroll context provider and consumer for detecting scroll position (scrollX, scrollY) and providing that data to child components.
- Host: GitHub
- URL: https://github.com/foo-software/react-scroll-context
- Owner: foo-software
- Created: 2019-04-14T15:40:19.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-09T09:15:21.000Z (almost 2 years ago)
- Last Synced: 2025-01-28T16:46:07.402Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 40 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `@foo-software/react-scroll-context`
> **React Scroll Context** exports a [React context](https://reactjs.org/docs/context.html) 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!
);
```
> [`useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) 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](https://www.foo.software). 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.