useResizeObserver

Hook that gives you resize observer state

sensors

low

test coverage

Last changed: 2 months ago

TIP

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

Installation

Library

CLI

Manual

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

Usage

const { entries, observer } = useResizeObserver(ref);
// or
const { ref, entry, observer } = useResizeObserver();
// or
const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));
// or
const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to observe
options.enabled?	boolean	true	The enabled state of the resize observer
options.box?	ResizeObserverBoxOptions	-	The box model to observe
options.onChange?	UseResizeObserverCallback	-	The callback to execute when resize is detected

Returns

UseResizeObserverReturn

Parameters

Name	Type	Default	Note
options.enabled?	boolean	true	The enabled state of the resize observer
options.box?	ResizeObserverBoxOptions	-	The box model to observe
options.onChange?	UseResizeObserverCallback	-	The callback to execute when resize is detected

Returns

UseResizeObserverReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
callback	UseResizeObserverCallback	-	The callback to execute when resize is detected

Returns

UseResizeObserverReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to observe
callback	UseResizeObserverCallback	-	The callback to execute when resize is detected

Returns

UseResizeObserverReturn

Type declaration

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

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

export type UseResizeObserverCallback = (
  entry: ResizeObserverEntry,
  observer: ResizeObserver
) => void;

export interface UseResizeObserverOptions extends ResizeObserverOptions {
  /** The enabled state of the resize observer */
  enabled?: boolean;
  /** The callback to execute when resize is detected */
  onChange?: UseResizeObserverCallback;
}

export interface UseResizeObserverReturn {
  /** The resize observer entries */
  entry: ResizeObserverEntry;
  /** The resize observer instance */
  observer?: ResizeObserver;
}

export interface UseResizeObserver {
  <Target extends Element>(
    options?: UseResizeObserverOptions,
    target?: never
  ): UseResizeObserverReturn & { ref: StateRef<Target> };

  (target: HookTarget, options?: UseResizeObserverOptions): UseResizeObserverReturn;

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

  (target: HookTarget, callback: UseResizeObserverCallback): UseResizeObserverReturn;
}

Source

Source • Demo

Contributors

D

debabin