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

PropTypeDefault
containerReact.MutableRefObject<HTMLElement>
delaynumber | function
immediateboolean | function
resetboolean
reverseboolean
pauseboolean
refSpringRef
configobject | functionobject
eventsfunction

Typescript

function useResize(configuration: ConfigObject): SpringValues

Where ConfigObject is described above