useIntersectionObserver

Features

Instance Reuse: Optimizes performance by reusing IntersectionObserver instances based on options.
Convenient Unwrapping: Automatically unwraps the entries parameter, allowing direct access to each entry in the callback.
Manual Observation Control: Allows manual control over observation using the observe and unobserve functions.

Installation

npm install @1hook/use-intersection-observer

Usage

import { useIntersectionObserver } from '@1hook/use-intersection-observer'

Observe an element's intersection with the viewport:

function MyComponent() {
  const { ref } = useIntersectionObserver((entry) => {
    console.log({ isIntersecting: entry.isIntersecting })
  })

  return <div ref={ref} />
}

Customize the intersection observer:

function MyComponent() {
  const { ref } = useIntersectionObserver(
    (entry) => console.log({ isIntersecting: entry.isIntersecting }),
    { rootMargin: '100px' },
  )

  return <div ref={ref} />
}

Stop observing the target after the first intersection:

function MyComponent() {
  const { ref, unobserve } = useIntersectionObserver((entry) => {
    if (!entry.isIntersecting) return
    console.log('Intersected!')
    unobserve()
  })

  return <div ref={ref} />
}

API Reference

UseIntersectionObserverOptions

Options for the useIntersectionObserver hook.

Prop	Type	Default
`autoObserve?`	`boolean`	`true`
`threshold?`	`number \| number[]`	-
`rootMargin?`	`string`	-
`root?`	`Element \| Document \| null`	-

UseIntersectionObserverReturn

Return value for the useIntersectionObserver hook.

Prop	Type	Default
`target`	`Element \| null`	-
`ref`	`Function`	-
`unobserve`	`() => void`	-
`observe`	`() => void`	-