37 packages found
<h1 align="center" style="border-bottom: none;">🔎 PerformanceObserver Polyfill</h1> <p align="center"> <a href="https://travis-ci.org/fastly/performance-observer-polyfill"> <img alt="Travis" src="https://img.shields.io/travis/fastly/performance-obs
A Svelte action that monitors an element enters or leaves the viewport or a parent element. Performant and efficient thanks to using Intersection Observer under the hood.
- svelte
- observer
- observing
- intersection
- viewport
- inviewport
- in-view
- in-viewport
- inview
- observe
- waypoint
- intersection-observer
- intersection-observer-api
- performance
- View more
react simple img
LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain "vanilla" JavaScript, it leve
- lazyload
- vanilla
- responsive
- images
- picture
- srcset
- sizes
- native
- SEO
- intersectionObserver
- progressive
- performance
- perfmatters
- async
React hook to measure an element's size and handle responsive components.
- react
- hook
- react-hook
- use
- use-dimensions
- resize
- observer
- resize-observer
- dimensions
- measure
- size
- responsive-components
- container-queries
- performance
React hook to monitor an element enters or leaves the viewport (or another element).
- react
- hook
- component
- react-hook
- inview-hook
- inviewport-hook
- in-view-hook
- in-viewport-hook
- intersection-hook
- intersection-observer-hook
- use
- use-inview
- use-inviewport
- use-in-view
- View more
Generic PerformanceObserver API wrapper for measuring performance metrics
- performance
- web-vitals
- custom metrics
- first-contentful-paint
- first-paint
- first-input-delay
- largest-contentful-paint
- cumulative-layout-shift
- time-to-first-byte
- element-timing
- navigation-timing
- resource-timing
- user-timing
- longtask
Performance for multiple ResizeObserver and IntersectionObserver
Performant react hooks for WebApi Observers, useResizeObserver, useInteractionObserver, useMutationObserver
- resize observer
- mutation observer
- intersection observer
- performance observer
- reporting observer
- resize observer hook
- mutation observer hook
- intersection observer hook
- performance observer hook
- reporting observer hook
- web appi
- performance
- use
- react
- View more
requestAnimationFrame pool to avoid busyness on the thread
IntersectionTrigger utilizes the most modern web technology to trigger anything by intersection. Including scroll-based animations.
- intersection
- trigger
- animation
- animejs
- IntersectionObserver
- intersection-observer
- lazy-load
- performance
- lazy-loading
- viewport
- scroll
- toggle-class
- scrollbar
react simple img
Harness the power of Intersection Observers for simple list virtualization in React
Provides a way with extra configuration options to execute a handler when a given element is on view.
- viewport
- events
- lazy
- load
- mobile
- cordova
- phonegap
- window
- document
- performance
- resize
- scroll
- responsive
- state
- View more
A tiny React hook for rendering large datasets like a breeze.
- react
- hook
- react-hook
- virtual-hook
- virtualized-hook
- use
- use-virtual
- use-virtualized
- virtual
- virtualized
- virtualization
- responsive-web-design
- rwd
- sticky-headers
- View more
This is a custom React hook that simplifies the process of using the Intersection Observer API to detect when an element is visible within the viewport.
Observe multiple React components with a single ResizeObserver.
a First Meaningful Paint metric collector using Mutation Observer
Provide performant way to subscribe to browser UI Events.
Minimalistic, fast, and highly efficient reactivity