npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

react-scroll-trigger

v0.6.0

Published

React component tied to scroll events with callbacks for enter, exit and progress while scrolling through the viewport.

Downloads

3,811

Readme

📜 react-scroll-trigger

npm version npm Coverage Status CircleCI Greenkeeper badge

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