Nearly Picked Makefiles

    react-scroll-trigger
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.14 • Public • Published

    📜 react-scroll-trigger

    npm NPM npm Coveralls github CircleCI Snyk Vulnerabilities for GitHub Repo

    React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.

    Install

    Via npm

    npm install react-scroll-trigger

    Via Yarn

    yarn add react-scroll-trigger

    How to use

    import ScrollTrigger from 'react-scroll-trigger';
    
    ...
    
      onEnterViewport() {
        this.setState({
          visible: true,
        });
      }
    
      onExitViewport() {
        this.setState({
          visible: false,
        });
      }
    
      render() {
        const {
          visible,
        } = this.state;
    
        return (
          <ScrollTrigger onEnter={this.onEnterViewport} onExit={this.onExitViewport}>
            <div className={`container ${visible ? 'container-animate' : ''}`} />
          </ScrollTrigger>
        );
      }

    The ScrollTrigger is intended to be used as a composable element, allowing you to either use it standalone within a page (ie. no children).

      <ScrollTrigger onEnter={this.onEnterViewport} onExit={this.onExitViewport} />

    Or, pass in children to receive events and progress based on the dimensions of those elements within the DOM.

      <ScrollTrigger onEnter={this.onEnterViewport} onExit={this.onExitViewport}>
        <List>
          [...list items...]
        </List>
      </ScrollTrigger>

    The beauty of this component is its flexibility. I’ve used it to trigger AJAX requests based on either the onEnter or progress of the component within the viewport. Or, as a way to control animations or other transitions that you would like to either trigger when visible in the viewport or based on the exact progress of that element as it transitions through the viewport.

    Properties

    Below are the properties that can be defined on a <ScrollTrigger /> instance. In addition to these properties, all other standard React properites like className, key, etc. can be passed in as well and will be applied to the <div> that will be rendered by the ScrollTrigger.

    • component:Element | String - React component or HTMLElement to render as the wrapper for the ScrollTrigger (Default: div)
    • containerRef:Object | String - DOM element instance or string to use for query selecting DOM element. (Default: document.documentElement)
    • throttleResize:Number - Delay to throttle resize calls in milliseconds (Default: 100)
    • throttleScroll:Number - Delay to throttle scroll calls in milliseconds (Default: 100)
    • triggerOnLoad:Boolean - Whether or not to trigger the onEnter callback on mount (Default: true)
    • onEnter:Function - Called when the component enters the viewport ({progress, velocity}, ref) => {}
    • onExit:Function - Called when the component exits the viewport ({progress, velocity}, ref) => {}
    • onProgress:Function - Called while the component progresses through the viewport ({progress, velocity}, ref) => {}

    License

    MIT © Ryan Hefner

    Install

    npm i react-scroll-trigger

    DownloadsWeekly Downloads

    1,539

    Version

    0.6.14

    License

    MIT

    Unpacked Size

    115 kB

    Total Files

    12

    Last publish

    Collaborators

    • ryanhefner