npmpackage.info

Gathering detailed insights and metrics for @react-hook/intersection-observer

Other packages similar to @react-hook/intersection-observer

react-intersection-observer-hook

4.0.0

React hook to use IntersectionObserver declaratively.

react-hook-intersection-observer

0.1.0

A simple React Hook that uses the Intersection Observer API

react-cool-inview

3.0.1

React hook to monitor an element enters or leaves the viewport (or another element).

react-hook-inview

4.5.1

React Hook for detecting when an element is in the viewport

Gathering detailed insights and metrics for @react-hook/intersection-observer

@react-hook/intersection-observer - 3.1.2 | npmpackage.info

@react-hook/intersection-observer

↩ Strongly typed, concurrent mode-safe React hooks

3.1.2

1,514

MIT

TypeScript

207.93 kB

2.4

Installations

npm install @react-hook/intersection-observer

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

21.0.0

NPM Version

10.2.0 Pull Requests

Open

15

Total

244

Closed

199

Merged

30

Issues

Open

22

Total

73

Closed

51

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

Shell

TypeScript (85.29%)

JavaScript (14.55%)

Shell (0.17%)

Developer

jaredLunde

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,514 Stars

429 Commits

96 Forks

9 Watchers

14 Branches

27 Contributors

Updated on Jul 09, 2025

Maintainers

View All 27 Contributors

Package Meta Information

Latest Version

3.1.2

Package Id

@react-hook/intersection-observer@3.1.2

Unpacked Size

207.93 kB

Size

56.91 kB

File Count

NPM Version

10.2.0

Node Version

21.0.0

Published on

Jul 30, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

useIntersectionObserver()

npm i @react-hook/intersection-observer

A React hook for the IntersectionObserver API that uses a polyfill when the native API is not available

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. The ancestor element or viewport is referred to as the root.

When an IntersectionObserver is created, it's configured to watch for given ratios of visibility within the root. The configuration cannot be changed once the IntersectionObserver is created, so a given observer object is only useful for watching for specific changes in degree of visibility.

Quick Start

1import * as React from 'react'
2import useIntersectionObserver from '@react-hook/intersection-observer'
3
4const Component = () => {
5  const [ref, setRef] = React.useState()
6  const {isIntersecting} = useIntersectionObserver(ref)
7  return <div ref={setRef}>Is intersecting? {isIntersecting}</div>
8}

API

`useIntersectionObserver(target, options)`

1function useIntersectionObserver<T extends HTMLElement = HTMLElement>(
2  target: React.RefObject<T> | T | null,
3  options: IntersectionObserverOptions = {}
4): IntersectionObserverEntry

Arguments

Argument	Type	Required?	Description
target	`React.RefObject \| T \| null`	Yes	A React ref created by `useRef()` or an HTML element
options	`IntersectionObserverOptions`	No	Configuration options for the IntersectionObserver

IntersectionObserverOptions

Property	Type	Default	Description
root	`DOMElement`	`document`	A specific ancestor of the target element being observed. If no value was passed to the constructor or this is `null`, the top-level document's viewport is used
rootMargin	`string`	`"0 0 0 0"`	Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections.
threshold	`number\|number[]`	`0`	Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of `0.5`. If you want the callback to run every time visibility passes another 25%, you would specify the array `[0, 0.25, 0.5, 0.75, 1]`. The default is 0 (meaning as soon as even one pixel is visible, the callback will be run). A value of 1.0 means that the threshold isn't considered passed until every pixel is visible.
pollInterval	`number`	`null`	The frequency in which the polyfill polls for intersection changes.
useMutationObserver	`bool`	`true`	You can also choose to not check for intersections in the polyfill when the DOM changes by setting this to `false`
initialIsIntersecting	`bool`	`false`	Changes the default value of `isIntersecting` for use in places like SSR

Returns `IntersectionObserverEntry`

Type	Description
`IntersectionObserverEntry`	This is the IntersectionObserverEntry object returned by the `IntersectionObserver` callback.

LICENSE

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @react-hook/intersection-observer

Other packages similar to @react-hook/intersection-observer

@react-hook/intersection-observer

Installations

Developer Guide

Yes

CommonJS, ESM

21.0.0

10.2.0

Pull Requests

15

244

199

30

Issues

22

73

51

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

useIntersectionObserver()

Quick Start

API

useIntersectionObserver(target, options)

Arguments

IntersectionObserverOptions

Returns IntersectionObserverEntry

LICENSE

10

10

5

0

0

0

0

0

0

0

2.4

/10

`useIntersectionObserver(target, options)`

Returns `IntersectionObserverEntry`