useInView

Whether an element is in the viewport, from an IntersectionObserver.

HooksLayout@gaudi/design-system/hooks/layout/use-in-viewView in Storybook Source

For lazy sections, "load more" sentinels, reading progress and reveal effects. With once, it stops observing after the element is first seen.

Usage

import { useInView } from '@gaudi/design-system/hooks';
const [ref, inView] = useInView({ rootMargin: '200px', once: true });<section ref={ref}>{inView ? <Comments /> : <Skeleton className='h-40' />}</section>

Examples

Load a section when it is reached

Storybook

"Load more" sentinel with a button

Storybook

API

6 options

3 return values

Accessibility

Never hide content until it scrolls into view for readers without JavaScript or with reduced motion; keep "load more" available as a real button too.

Notes

Set initialInView to true for content that must render without JavaScript.

useCollapsibleSectionsExpanded state for several sections, with expand all and collapse all.useElementSizeAn element's size, kept current with a ResizeObserver.useScrollPositionThe vertical scroll offset of the page or a scroll container.