useElementVisibility#

Whether an element intersects the viewport (or a scroll container), as a reactive boolean. Browser composable — import from @sigx/use-web.

It builds on useIntersectionObserver and returns a ReadSignal<boolean>.

import { signal, effect } from 'sigx';
import { useElementVisibility } from '@sigx/use-web';

const heroRef = signal<HTMLElement | null>(null);
// <section ref={heroRef}> …

const visible = useElementVisibility(heroRef);
effect(() => {
    if (visible.value) startAnimation();
});

Pass any element target. Set scrollTarget to observe within a scroll container instead of the viewport, and threshold to require more of the element on screen before it counts as visible.

Signature#

function useElementVisibility(
    target: MaybeSignalElement,
    options?: UseElementVisibilityOptions,
): ReadSignal<boolean>;

Options#

SSR#

false — the element is reported not visible until the observer runs on mount.

See also#

• useIntersectionObserver — the observer this wraps; use it for entry-level detail or pause/resume.
• useElementSize — the size counterpart, over useResizeObserver.