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 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-waypoint-jk

v1.2.4

Published

A React component to execute a function whenever you scroll to an element.

Downloads

2

Readme

React Waypoint

npm version Build Status

A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the window.

React Waypoint can be used to build features like lazy loading content, infinite scroll, or docking elements to the viewport on scroll.

Inspired by Waypoints, except this little library grooves the React way.

Demo

Demo of React Waypoint in action

View demo page

Installation

npm

npm install react-waypoint --save

Usage

var Waypoint = require('react-waypoint');
<Waypoint
  onEnter={this._handleWaypointEnter}
  onLeave={this._handleWaypointLeave}
/>

A waypoint normally fires onEnter and onLeave as you are scrolling, but it can fire because of other events too:

  • When the window is resized
  • When it is mounted (fires onEnter if it's visible on the page)
  • When it is updated/re-rendered by its parent

Callbacks will only fire if the new position changed from the last known position. Sometimes it's useful to have a waypoint that fires onEnter every time it is updated as long as it stays visible (e.g. for infinite scroll). You can then use a key prop to control when a waypoint is reused vs. re-created.

<Waypoint
  key={cursor}
  onEnter={this._loadMoreContent}
/>

Example: JSFiddle Example

Prop types

  propTypes: {

    /**
     * Function called when waypoint enters viewport
     * Both parameters will be null if the waypoint is in the
     * viewport on initial mount.
     *
     * @param {Event|null} event
     * @param {Waypoint.above|Waypoint.below|null} from
     */
    onEnter: PropTypes.func,

    /**
     * Function called when waypoint leaves viewport
     *
     * @param {Event|null} event
     * @param {Waypoint.above|Waypoint.below} to
     */
    onLeave: PropTypes.func,

    /**
     * Threshold - a percentage of the height of the visible
     * part of the scrollable parent (e.g. 0.1)
     */
    threshold: PropTypes.number,

    /**
     * Scrollable Parent - A custom parent to determine if the
     * target is visible in it. This is useful in cases where
     * you do not want the immediate scrollable ancestor to be
     * the container. For example, when your target is in a div
     * that has overflow auto but you are detecting onEnter based
     * on the window.
     */
    scrollableParent: PropTypes.any,

    /**
     * FireOnRapidScroll - if the onEnter/onLeave events are to be fired
     * on rapid scrolling
     */
    fireOnRapidScroll: PropTypes.bool,
  },

Limitations

In this component we make a few assumptions that we believe are generally safe, but in some situations might present limitations.

  • We determine the scrollable-ness of a node by inspecting its computed overflow-y or overflow property and nothing else. This could mean that a container with this style but that does not actually currently scroll will be considered when performing visibility calculations.
  • We assume that waypoint is rendered within at most one scrollable container. If you render a waypoint in multiple nested scrollable containers, the visibility calculations will likely not be accurate.
  • We also base the visibility calculations on the scroll position of the scrollable container (or window if no scrollable container is found). This means that if your scrollable container has a height that is greater than the window, it might trigger onEnter unexpectedly.

Credits

Credit to trotzig and lencioni for writing this component, and the Brigade team for open sourcing it.

Thanks to the creator of the original Waypoints library, imakewebthings.

License

MIT