Reusables

Installation

npx shadcn@latest add "https://reusables.vercel.app/r/use-inview"

The hook provides viewport intersection detection with react observer.

import useInViewState from "@/hooks/use-inview"

const { ref, isInView } = useInViewState({
  triggerOnce: true,
  threshold: 0.5,
})

Scroll to see me

Options

Prop	Type	Default
`triggerOnce`	`boolean`	`true`
`threshold`	`number`	`0.1`

Prop	Type	Default
`ref`	`(node: Element \| null) => void`	-
`isInView`	`boolean`	-