Skip to content

A React scroll context provider and consumer for detecting scroll position (scrollX, scrollY) and providing that data to child components.

Notifications You must be signed in to change notification settings

foo-software/react-scroll-context

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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

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 = () => (
  <ScrollProvider
    Context={Context}
  >
    <div>
      <h1>Scroll it!</h1>
      <Context.Consumer>
        {({ scrollX, scrollY, isScrollingDown }) => (
          <pre>
            scrollX: {scrollX}
            scrollY: {scrollY}
            isScrollingDown: {isScrollingDown ? 'yes' : 'no'}
          </pre>
        )}
      </Context.Consumer>
    </div>
  </ScrollProvider>
);

Class

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 (
      <pre>
        scrollX: {scrollX}
        scrollY: {scrollY}
        isScrollingDown: {isScrollingDown ? 'yes' : 'no'}
      </pre>
    );
  }
}

const App = () => (
  <ScrollProvider
    Context={Context}
  >
    <div>
      <h1>Scroll it!</h1>
      <ScrollDisplay />
    </div>
  </ScrollProvider>
);

useContext hook

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 (
    <pre>
      scrollX: {scrollX}
      scrollY: {scrollY}
      isScrollingDown: {isScrollingDown ? 'yes' : 'no'}
    </pre>
  );
};

const App = () => (
  <ScrollProvider
    Context={Context}
  >
    <div>
      <h1>Scroll it!</h1>
      <ScrollDisplay />
    </div>
  </ScrollProvider>
);

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.

About

A React scroll context provider and consumer for detecting scroll position (scrollX, scrollY) and providing that data to child components.

Resources

Stars

Watchers

Forks

Packages

No packages published