Skip to content

useVisibility ​

Hook that gives you visibility observer state

sensors
medium
test coverage
Last changed: 15 hours ago

Installation ​

Library
CLI
Manual
typescript
import { useVisibility } from '@siberiacancode/reactuse';

Usage ​

typescript
const { ref, entries, observer } = useVisibility();
// or
const { entries, observer } = useVisibility(ref);
// or
const { ref, entries, observer } = useVisibility(() => console.log('callback'));
// or
const { entries, observer } = useVisibility(ref, () => console.log('callback'));

Demo ​

Api ​

Parameters

NameTypeDefaultNote
targetHookTarget-The target element to detect intersection
options.enabled?booleantrueThe Intersection options
options.onChange?((entries: IntersectionEntry[], observer: Intersection) => void) | undefined-The callback to execute when intersection is detected
options.root?HookTargetdocumentThe root element to observe

Returns

UseVisibilityReturn

Parameters

NameTypeDefaultNote
options.enabled?booleantrueThe Intersection options
options.onChange?((entries: IntersectionEntry[], observer: Intersection) => void) | undefined-The callback to execute when intersection is detected
options.root?HookTargetdocumentThe root element to observe

Returns

UseVisibilityReturn & { ref: StateRef<Target> }

Parameters

NameTypeDefaultNote
callbackUseVisibilityCallback-The callback to execute when intersection is detected

Returns

UseVisibilityReturn & { ref: StateRef<Target> }

Parameters

NameTypeDefaultNote
callbackUseVisibilityCallback-The callback to execute when intersection is detected
targetHookTarget-The target element to detect intersection

Returns

UseVisibilityReturn

Type declaration ​

typescript
import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export type UseVisibilityCallback = (
  entry: IntersectionObserverEntry,
  observer: IntersectionObserver
) => void;

export interface UseVisibilityOptions extends Omit<IntersectionObserverInit, 'root'> {
  /** The enabled state of the intersection */
  enabled?: boolean;
  /** The callback to execute when intersection is detected */
  onChange?: UseVisibilityCallback;
  /** The root element to observe */
  root?: HookTarget;
}

export interface UseVisibilityReturn {
  /** The intersection observer entry */
  entry?: IntersectionObserverEntry;
  /** The intersection observer in view */
  inView?: boolean;

  /** The intersection observer instance */
  observer?: IntersectionObserver;
}

export interface UseVisibility {
  <Target extends Element>(
    options?: UseVisibilityOptions,
    target?: never
  ): UseVisibilityReturn & { ref: StateRef<Target> };

  (target: HookTarget, options?: UseVisibilityOptions): UseVisibilityReturn;

  <Target extends Element>(
    callback: UseVisibilityCallback,
    target?: never
  ): UseVisibilityReturn & { ref: StateRef<Target> };

  (target: HookTarget, callback: UseVisibilityCallback): UseVisibilityReturn;
}

Source ​

Source • Demo

Contributors ​

D
debabin
debabin

Released under the MIT License.