useResize

A small abstraction around the useSpring hook. It returns a SpringValues object with the width and height of the element it's attached to & doesn't necessarily have to be attached to the window, by passing a container you can observe that element's size instead.

Usage

import { useResize, animated } from '@react-spring/web'

function MyComponent() {
  const { width, height } = useResize()

  return <animated.div style={{ width, height }}>Hello World</animated.div>
}

Reference

Prop	Type	Default
`container`	`React.MutableRefObject<HTMLElement>`	–
`delay`	`number \| function`	–
`immediate`	`boolean \| function`	–
`reset`	`boolean`	–
`reverse`	`boolean`	–
`pause`	`boolean`	–
`ref`	`SpringRef`	–
`config`	`object \| function`	`object`
`events`	`function`	–

Typescript

function useResize(configuration: ConfigObject): SpringValues

Where ConfigObject is described above