React Intersection Observer

react-intersection-observer Intersection Observer API का एक React इम्प्लीमेंटेशन है जिसे यह ट्रैक करने के लिए डिज़ाइन किया गया है कि DOM तत्व कब ब्राउज़र व्यूपोर्ट में प्रवेश करते हैं या छोड़ते हैं। यह तत्व दृश्यता की निगरानी करने और उपयोगकर्ता के लिए सामग्री दिखाई देने पर कॉलबैक ट्रिगर करने के लिए एक रैपर और हुक का एक सेट प्रदान करता है।

लाइब्रेरी में यह निर्धारित करने के लिए DOM ऑक्लूजन डिटेक्शन का एक मैकेनिज्म शामिल है कि क्या कोई तत्व अन्य घटकों द्वारा कवर किया गया है या CSS फिल्टर द्वारा छिपा हुआ है। इसमें एक पॉलीफिल रैपर भी है जो उन ब्राउज़रों के लिए दृश्यता फॉलबैक प्रदान करता है जो मूल रूप से इंटरसेक्शन ऑब्जर्वर क्षमताओं का समर्थन नहीं करते हैं।

प्रोजेक्ट विभिन्न दृश्यता ट्रैकिंग क्षमताओं को कवर करता है, जिसमें घटक पुन: रेंडर के लिए स्टेट-सिंक्ड अपडेट और स्टेट को अपडेट किए बिना कॉलबैक निष्पादित करने के लिए नॉन-रेंडरिंग मॉनिटरिंग शामिल है। ये टूल्स इनफिनिट स्क्रॉलिंग, एसेट्स की लेज़ी लोडिंग और स्क्रॉल-आधारित एनिमेशन के कार्यान्वयन का समर्थन करते हैं।

Features

Viewport Observers - Tracks when DOM elements enter or exit the browser viewport to trigger application actions.
Item Visibility Detection - Determines if a specific UI element is currently visible in the viewport.
Viewport Visibility Observers - Provides a set of hooks for monitoring element visibility and triggering callbacks.
Browser API Wrappers - Implements a functional wrapper around the native browser Intersection Observer API.
Intersection Observer Implementations - Provides a React implementation of the Intersection Observer API for viewport visibility tracking.
Visibility State Syncing - Synchronizes the native observer callback with React state to trigger component re-renders.
Event-Driven Callbacks - Executes user-defined functions directly from the observer to avoid unnecessary React state updates.
DOM Occlusion Detection - Detects if an element is covered by other components or hidden by CSS filters.
Occlusion Tracking - Tracks whether a DOM element is covered by another element or hidden by filters.
Infinite Scrolling - Enables the implementation of infinite scrolling by detecting when the user reaches the bottom of a list.
Ref-Based Measurement - Binds observers to DOM elements using React refs to track visibility and trigger logic.
Scroll Animations - Triggers visual transitions and animations when elements become visible on the screen.
Non-Rendering Visibility Monitoring - Executes callbacks upon visibility changes without triggering component state updates for optimized performance.
Image Lazy Loading - Defers the loading of images and media assets until they enter the browser viewport.
Browser & DOM Utilities - Intersection Observer API implementation.
Visibility Reporters - React implementation of the Intersection Observer API.

स्टार हिस्ट्री

thebuilderreact-intersection-observer

Name: thebuilder/react-intersection-observer
Author: thebuilder

View on GitHub

5,537 स्टार्स189 फोर्क्सTypeScriptMIT3 व्यूज़react-intersection-observer.vercel.app

React Intersection Observer

Features

Viewport Observers - Tracks when DOM elements enter or exit the browser viewport to trigger application actions.
Item Visibility Detection - Determines if a specific UI element is currently visible in the viewport.
Viewport Visibility Observers - Provides a set of hooks for monitoring element visibility and triggering callbacks.
Browser API Wrappers - Implements a functional wrapper around the native browser Intersection Observer API.
Intersection Observer Implementations - Provides a React implementation of the Intersection Observer API for viewport visibility tracking.
Visibility State Syncing - Synchronizes the native observer callback with React state to trigger component re-renders.
Event-Driven Callbacks - Executes user-defined functions directly from the observer to avoid unnecessary React state updates.
DOM Occlusion Detection - Detects if an element is covered by other components or hidden by CSS filters.
Occlusion Tracking - Tracks whether a DOM element is covered by another element or hidden by filters.
Infinite Scrolling - Enables the implementation of infinite scrolling by detecting when the user reaches the bottom of a list.
Ref-Based Measurement - Binds observers to DOM elements using React refs to track visibility and trigger logic.
Scroll Animations - Triggers visual transitions and animations when elements become visible on the screen.
Non-Rendering Visibility Monitoring - Executes callbacks upon visibility changes without triggering component state updates for optimized performance.
Image Lazy Loading - Defers the loading of images and media assets until they enter the browser viewport.
Browser & DOM Utilities - Intersection Observer API implementation.
Visibility Reporters - React implementation of the Intersection Observer API.

React Intersection Observer के ओपन-सोर्स विकल्प

समान ओपन-सोर्स प्रोजेक्ट्स, जो React Intersection Observer के साथ साझा की गई सुविधाओं के आधार पर रैंक किए गए हैं।

hilongjw/vue-lazyload
hilongjw/vue-lazyload
8,006GitHub पर देखें
vue-lazyload is a Vue.js image lazy loading plugin and frontend asset optimizer. It serves as a viewport visibility observer that defers the loading of images and components until they enter the browser viewport to reduce initial page load times. The project functions as a progressive image loader by managing image placeholders and implementing dynamic source switching. It uses a browser API to monitor when elements enter the viewport, avoiding expensive scroll event listeners to maintain performance. The plugin provides capabilities for image loading state tracking, including custom placeho
JavaScriptlazyloadvuevue-lazyload
GitHub पर देखें8,006
camwiegert/in-view
camwiegert/in-view
4,611GitHub पर देखें
in-view is a DOM visibility detector and intersection observer wrapper. It serves as a viewport transition handler that triggers callbacks and events when specific screen elements enter or exit the browser window. The library provides a system for configuring visibility criteria using pixel offsets, percentages, or custom test functions. It includes utilities for observing visibility changes, performing manual visibility evaluations, and checking the current status of an element within the visible area. These capabilities support application patterns such as lazy loading, infinite scrolling,
JavaScriptjavascriptutilityviewport
GitHub पर देखें4,611
brigade/react-waypoint
brigade/react-waypoint
4,047GitHub पर देखें
react-waypoint is a set of React components and wrappers designed to execute callbacks when specific DOM elements enter or exit the visible screen area. It functions as a viewport visibility tracker that monitors when elements cross predefined spatial boundaries. The project provides a scroll trigger component and event wrapper that allow for custom offset configurations to account for fixed UI elements. These tools can be configured to use a specific DOM node or the global window as the scrollable ancestor for visibility calculations. The library covers several implementation patterns, incl
JavaScript
GitHub पर देखें4,047
twobin/react-lazyload
twobin/react-lazyload
5,904GitHub पर देखें
react-lazyload is a React component and viewport visibility wrapper designed to minimize resource consumption by deferring the display of off-screen UI elements. It functions as a frontend performance optimizer that delays the rendering of images or components until they enter the browser viewport. The library prevents layout shifts by allowing the definition of placeholder dimensions, maintaining page stability while content loads lazily. It manages the transition from these placeholders to actual content using internal state and optional animations. The system provides mechanisms for viewp
JavaScriptlazyloadreact
GitHub पर देखें5,904

React Intersection Observer के सभी 30 विकल्प देखें

अक्सर पूछे जाने वाले प्रश्न

thebuilder/react-intersection-observer क्या करता है?

thebuilder/react-intersection-observer की मुख्य विशेषताएं क्या हैं?

thebuilder/react-intersection-observer की मुख्य विशेषताएं हैं: Viewport Observers, Item Visibility Detection, Viewport Visibility Observers, Browser API Wrappers, Intersection Observer Implementations, Visibility State Syncing, Event-Driven Callbacks, DOM Occlusion Detection।

thebuilder/react-intersection-observer के कुछ ओपन-सोर्स विकल्प क्या हैं?

thebuilder/react-intersection-observer के ओपन-सोर्स विकल्पों में शामिल हैं: hilongjw/vue-lazyload — vue-lazyload is a Vue.js image lazy loading plugin and frontend asset optimizer. It serves as a viewport visibility… camwiegert/in-view — in-view is a DOM visibility detector and intersection observer wrapper. It serves as a viewport transition handler… brigade/react-waypoint — react-waypoint is a set of React components and wrappers designed to execute callbacks when specific DOM elements… twobin/react-lazyload — react-lazyload is a React component and viewport visibility wrapper designed to minimize resource consumption by… apoorvsaxena/lozad.js — lozad.js is a JavaScript lazy loading library and viewport-based media loader. It serves as a dependency-free wrapper… michalsnik/aos — AOS is a scroll-triggered animation library that controls the execution, timing, and mapping of CSS transitions based…

स्टार हिस्ट्री

अक्सर पूछे जाने वाले प्रश्न

thebuilder/react-intersection-observer क्या करता है?

thebuilder/react-intersection-observer की मुख्य विशेषताएं क्या हैं?

thebuilder/react-intersection-observer के कुछ ओपन-सोर्स विकल्प क्या हैं?