React Intersection Observer Inview

A lightweight and simple React hook for detecting if an element is in the viewport using the Intersection Observer API. Perfect for lazy loading, infinite scrolling, animations, and more!

Installation

1npm install react-intersection-observer-inview
2or
3yarn install react-intersection-observer-inview

Features

• Uses the Intersection Observer API for efficient viewport detection.
• Simple React hook interface for easy integration.
• Minimal setup required.
• TypeScript support for better development experience.

Usage

1import React from 'react';
2import { useIntersectionObserver } from 'react-intersection-observer-inview';
3
4const MyComponent = () => {
5  const { ref, inView } = useIntersectionObserver({
6    threshold: 0.5,  // Element is considered in view when 50% is visible
7    rootMargin: '0px 0px 0px 0px', // Optional margin for the root element
8  });
9
10  return (
11    <div ref={ref}>
12      <span>{`In View: ${inView ? 'Yes' : 'No'}`}</span>
13    </div>
14  );
15};
16
17export default MyComponent;
18

Props

• root? - The element to use as the viewport for intersection checking. Defaults to the browser viewport.
• rootMargin? - Margin around the root element. Accepts CSS margin property values.
• threshold? - Percentage of the target element's visibility required to trigger the observer. (0 - 1)

Return values

• ref - The reference to be attached to the target element.
• inView - true if the element is in the viewport, otherwise false.
• entry? - The entry object from the Intersection Observer (optional)

LICENSE

MIT