useSize

Hook that observes and returns the width and height of element

elements

low

test coverage

Last changed: 34 minutes ago

Installation

Library

CLI

Manual

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

Usage

const { value, observer } = useSize(ref);
// or
const { ref, value, observer } = useSize();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to observe

Returns

UseSizeReturn

Returns

{ ref: StateRef<Target> } & UseSizeReturn

Type declaration

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

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

export interface UseSizeValue {
  /** The element's height */
  height: number;
  /** The element's width */
  width: number;
}

export interface UseSizeReturn {
  /** The resize observer instance */
  observer?: ResizeObserver;
  /** The current size value */
  value: UseSizeValue;
}

export interface UseSize {
  (target: HookTarget): UseSizeReturn;

  <Target extends Element>(
    target?: never
  ): {
    ref: StateRef<Target>;
  } & UseSizeReturn;
}

Source

Source • Demo

Contributors

D

debabin

A

Alexander Lee

B

babin

V

VLADISLAW9