Skip to content

Latest commit

 

History

History
 
 

size

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

useSize()

Bundlephobia Types Build status NPM Version MIT License

npm i @react-hook/size

A React hook for measuring the size of HTML elements including when they change

Features

  • Determines the size of the element including any padding, borders, and scroll bars.
  • The size reported by the hook updates each time the size of the element changes.
  • Uses a single ResizeObserver for tracking all elements used by the hooks. This approach is astoundingly more performant than using a ResizeObserver per element which most hook implementations do.
  • Uses @juggle/resize-observer as a ponyfill when ResizeObserver isn't supported by the current browser.
  • Automatically unobserves the target element when the hook unmounts.

Quick Start

Check out an example on CodeSandbox

import * as React from 'react'
import useSize from '@react-hook/size'

const Component = () => {
  const target = React.useRef(null)
  const [width, height] = useSize(target)

  return (
    <div ref={target}>
      <div>Width: {width}</div>
      <div>Height: {height}</div>
    </div>
  )
}

API

useSize(target, options?)

Argument Type Required? Description
target React.RefObject | T | null Yes A React ref created by useRef() or an HTML element
options UseSizeOptions No Options for SSR. See UseSizeOptions.

UseSizeOptions

export interface UseSizeOptions {
  // The initial width to set into state.
  // This is useful for SSR environments.
  initialWidth: 0
  // The initial height to set into state.
  // This is useful for SSR environments.
  initialHeight: 0
}

LICENSE

MIT