React Visible Observer is a React component library based on the Intersection Observer API, designed to monitor when elements enter or leave the viewport (visible area). This library can trigger callback functions when elements become visible or invisible, making it ideal for implementing lazy loading, animation triggering, and other interactive features dependent on element visibility.

简体中文

You can install this library via npm or yarn:

npm install react-visible-observer

or

yarn add react-visible-observer

import React, { useRef } from 'react';
import { useIntersectionObserver } from 'react-visible-observer';

const MyComponent = () => {
  const ref = useRef(null);
  const onVisibilityChange = (isVisible) => {
    console.log(`The element is now ${isVisible ? 'visible' : 'hidden'}`);
  };

  useIntersectionObserver(ref, onVisibilityChange);

  return (
    <div ref={ref} style={{ height: '100px', backgroundColor: 'blue' }}>
      This is a div that will be observed.
    </div>
  );
};

export default MyComponent;

import React, { useRef } from 'react';
import { useIntersectionObserver } from 'react-visible-observer';

const MyComponent = () => {
  const listRef = useRef([]);

  const onVisibilityChange = (isVisible, entry) => {
    const id = entry.target.id; // 获取元素的ID
    console.log(`${id} 元素现在 ${isVisible ? '可见' : '不可见'}`);
  };

  useIntersectionObserver(listRef, onVisibilityChange);

  return (
    <div>
      <div ref={el => listRef.current[0] = el} id="item1">Item 1</div>
      <div ref={el => listRef.current[1] = el} id="item2">Item 2</div>
      <div ref={el => listRef.current[2] = el} id="item3">Item 3</div>
    </div>
  );
};

export default MyComponent;

useIntersectionObserver(ref, onVisibilityChange, onEntryUpdate, options)

• boundingClientRect: A DOMRectReadOnly object representing the current size and position of the target element's bounding box in viewport coordinates.
• intersectionRatio: A floating-point number indicating the ratio of the intersection area to the target's bounding box or to the root's bounding box, depending on the value of the root property.
• intersectionRect: A DOMRectReadOnly object representing the size and position of the intersection rectangle's intersection area.
• isIntersecting: A Boolean value indicating whether the target element intersects with the root element.
• rootBounds: A DOMRectReadOnly object representing the bounding box of the root element in viewport coordinates. If there is no root element, this value is null.
• target: An Element object representing the target element being observed.
• time: A floating-point number representing the time at which the intersection occurred, in milliseconds.

React Visible Observer is released under the MIT License. See the LICENSE file for details.