@ehsaneha/react-inview

React hook to detect when an element enters or leaves the viewport using the Intersection Observer API.

Features

• Easily track element visibility in the viewport
• Supports root margin and threshold configuration
• Optional once flag to trigger visibility callback only once
• New disabled prop to toggle observation on and off dynamically
• Lightweight and TypeScript-ready

Installation

npm install @ehsaneha/react-inview

or

yarn add @ehsaneha/react-inview

Usage

Basic usage

import React from "react";
import useInView from "@ehsaneha/react-inview";

function Example() {
  const [ref, isVisible] = useInView({ threshold: 0.5 });

  return (
    <div ref={ref} style={{ minHeight: "150px" }}>
      {isVisible ? "Visible" : "Not visible"}
    </div>
  );
}

API

useInView(props?: InViewOptionalProps): [React.RefObject<T>, boolean]

• props (optional): Configuration options

  • rootMargin (string): Margin around the root. Default "0px"
  • threshold (number | number[]): Threshold(s) at which to trigger. Default 0
  • once (boolean): Whether to disconnect observer after first visibility. Default false
  • disabled (boolean): Whether to disable the observer. Default false

Returns a tuple with:

• ref: React ref to assign to the element to observe
• isVisible: Boolean indicating whether the element is currently visible

useInViewStateless(onChange, props?)

Stateless version that accepts a callback instead of returning state.

Testing

Tests are written using Jest and React Testing Library Hooks.

npm test

Mocks the Intersection Observer API to verify:

• Observation starts and stops correctly
• disabled toggling works dynamically
• once flag disconnects observer after first visibility event

License

This package is licensed under the MIT License. See LICENSE for more information.

Feel free to modify or contribute to this package!