State primitives

Hooks

Use hooks when components are too opinionated for your flow.

useImage

Load an image imperatively with state, retry, timeout, and reload support.

Status: loadingWaiting for image state

tsx

const image = useImage({
  src: '/images/home/feature2.jpg',
  retry: 1,
  timeout: 8000
})

return (
  <div>
    Status: {image.status}
    <span>{image.isLoaded ? 'Loaded with useImage()' : 'Waiting for image state'}</span>
  </div>
)

useInView

Gate loading or animations behind IntersectionObserver with rootMargin and threshold control.

In view: false

Scroll this docs page and this block updates through useInView.

tsx

const { ref, inView } = useInView<HTMLDivElement>({
  rootMargin: '120px 0px',
  triggerOnce: false
})

return (
  <div ref={ref} data-active={inView}>
    <span>{inView ? 'In view: true' : 'In view: false'}</span>
  </div>
)