@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

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.