@foo-software/react-scroll-context

    0.0.27 • Public • Published

    @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.

    Install

    npm i @foo-software/react-scroll-context

    DownloadsWeekly Downloads

    4

    Version

    0.0.27

    License

    MIT

    Unpacked Size

    14.8 kB

    Total Files

    11

    Last publish

    Collaborators

    • adamhenson