useInView

Installation

npm install @1hook/use-in-view

Usage

import { useInView } from '@1hook/use-in-view'

Track the visibility of an element:

function MyComponent() {
  const { ref, inView } = useInView()

  return <div ref={ref}>...</div>
}

Set a default value until the target is observed:

function MyComponent() {
  const { ref, inView = true } = useInView()

  return <div ref={ref}>...</div>
}

Customize the intersection observer:

function MyComponent() {
  const { ref, inView } = useInView({
    root: document.querySelector('#root'),
    rootMargin: '10px',
    threshold: 0.5,
  })

  return <div ref={ref}>...</div>
}

Observe once:

function MyComponent() {
  const { ref, unobserve } = useInView({
    onChange: (inView) => inView && unobserve(),
  })

  return <div ref={ref}>...</div>
}

API Reference

UseInViewOptions

Options for the useInView hook.

Prop	Type	Default
`onChange?`	`((inView: boolean) => void)`	-
`trackState?`	`boolean`	`true`
`autoObserve?`	`boolean`	`true`
`threshold?`	`number \| number[]`	-
`rootMargin?`	`string`	-
`root?`	`Element \| Document \| null`	-

UseInViewReturn

Return value for the useInView hook.

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