useVisibility

Hook that gives you visibility observer state

sensors

medium

test coverage

Last changed: last month

TIP

This hook uses IntersectionObserver browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library

CLI

Manual

import { useVisibility } from '@siberiacancode/reactuse';

Usage

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

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to detect intersection
options.enabled?	boolean	true	The Intersection options
options.onChange?	((entries: IntersectionEntry[], observer: Intersection) => void) | undefined	-	The callback to execute when intersection is detected
options.root?	HookTarget	document	The root element to observe

Returns

UseVisibilityReturn

Parameters

Name	Type	Default	Note
options.enabled?	boolean	true	The Intersection options
options.onChange?	((entries: IntersectionEntry[], observer: Intersection) => void) | undefined	-	The callback to execute when intersection is detected
options.root?	HookTarget	document	The root element to observe

Returns

UseVisibilityReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
callback	UseVisibilityCallback	-	The callback to execute when intersection is detected

Returns

UseVisibilityReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
callback	UseVisibilityCallback	-	The callback to execute when intersection is detected
target	HookTarget	-	The target element to detect intersection

Returns

UseVisibilityReturn

Type declaration

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