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-viewport-utils

v2.0.2

Published

Utility components for working with the viewport in react

Downloads

7,021

Readme

React Viewport Utils

A set of low level utility components for react to make working with the viewport (e.g scroll position or size of the page) easy to use and performant by default.

Build Status Coverage Status

See the example folder for more information about what you can build with it.

Why?

On a website with more sophisticated user interactions a lot of components need access to viewport information to e.g. know whether they are in the viewport, should resize or trigger an animation.

Most of the libraries reimplement the required functionality for that kind of features on its own over and over again. Those functionalities are not just hard to implement but can also, if not done well, cause the UX to suffer by introducing layout thrashing and therefore jank and will also cause the bundle size to grow which reduce the time to interaction. Further its hard to prioritize between highly and less important events if the implementation is not bundled in one central position.

This library solves all those issues by

  • using one central event handler per event to collect data
  • triggers updates to components using request animation frame
  • allows to prioritize the importance of updates at runtime which allows to drop frames for less important updates in case the main thread is busy
  • implements patterns like onUpdate callbacks, render props, higher order components and hooks which make the developer experience as simple as possible and allows the developer to concentrate on the application and not on global event handling.

Installation/ requirements

Please note that react version 16.3 or higher is required for this library to work because it is using the context as well as references api.

npm install --save react-viewport-utils

By default the library ships with Typescript definitions, so there is no need to install a separate dependency. Typescript is no a requirement, all type definition are served within separate files.

For detection of some resize events the ResizeObserver API is used internally which is not supported in some browsers. Please make sure to implement a polyfill on your own in case its required for your application.

Supported Environments

Browsers

The goal is to support the most recent versions of all major browsers (Edge, Safari, Chrome and Firefox).

We try to be downward compatible with older browsers when possible to at least not throw errors, but older versions will not be test at all.

In case you have specific requirements, please fill an issue or create a PR so we can discuss about them.

NodeJS

The project aims to support recent releases of v8 and v10 and higher of NodeJS.

Documentation

API

Concepts

License

Licensed under the MIT License.