Skip to content

useResizeObserver ​

Hook that gives you resize observer state

sensors
low
test coverage
Last changed: 2 days ago

Installation ​

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

Usage ​

typescript
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 ​

Api ​

Parameters

NameTypeDefaultNote
targetHookTarget-The target element to observe
options.enabled?booleantrueThe 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

NameTypeDefaultNote
options.enabled?booleantrueThe 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

NameTypeDefaultNote
callbackUseResizeObserverCallback-The callback to execute when resize is detected

Returns

UseResizeObserverReturn & { ref: StateRef<Target> }

Parameters

NameTypeDefaultNote
targetHookTarget-The target element to observe
callbackUseResizeObserverCallback-The callback to execute when resize is detected

Returns

UseResizeObserverReturn

Type declaration ​

typescript
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
debabin

Released under the MIT License.