@notthatnathan/use-element-size

1.1.11 • Public • Published

useElementSize

React hook to track the size of an element. Pass an element ref that you’d like to observe. Its initial and changing width and height are returned.

Example

const ParentComponent = () => {
  const parentRef = useRef(null)
  const [width, height] = useElementSize(parentRef, [300, 100])

  return (
    <div ref={parentRef}>
      <MyComponent parentWidth={width} parentHeight={height} />
    </div>
  )
}

Arguments

  • ref: The element ref to watch for size changes.
  • defaultSize (optional): Provide a default size to return if a measurement isn’t yet available. Helpful for server-side rendering.

Read the blog post

Readme

Keywords

none

Package Sidebar

Install

npm i @notthatnathan/use-element-size

Weekly Downloads

2

Version

1.1.11

License

MIT

Unpacked Size

27 kB

Total Files

15

Last publish

Collaborators

  • notthatnathan