React Viewport Utils

Utility components for working with the viewport in react
Alternatives To React Viewport Utils
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Intersection Observer4,33915359012 days ago144June 28, 2023mitTypeScript
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
4 years ago65mitJavaScript
:dog: :clap: :star2: Welcome to star
React Visibility Sensor2,1984773512 years ago53July 25, 201977mitJavaScript
Sensor component for React that notifies you when it goes in or out of the window viewport.
React Mapbox Gl1,839317635 days ago142November 26, 2020264mitTypeScript
A React binding of mapbox-gl-js
React Cool Inview1,454132 months ago86April 17, 202218mitTypeScript
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
React Stickynode1,1831426211 days ago50July 15, 202216otherJavaScript
A performant and comprehensive React sticky component.
React Spaces1,139484 months ago83August 30, 202315mitTypeScript
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces.
Fresnel1,119226a month ago63August 29, 202328otherTypeScript
An SSR compatible approach to CSS media query based responsive layouts for React.
React Intersection Observer1,09065677 months ago34November 04, 202018mitJavaScript
React component for the Intersection <Observer /> API
React Awesome Reveal9541132 months ago62June 29, 202318mitTypeScript
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Alternatives To React Viewport Utils
Select To Compare

Alternative Project Comparisons

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.


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


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.


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





Licensed under the MIT License.

Popular Viewport Projects
Popular Reactjs Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Resize Events