@charlietango/use-element-size
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    useElementSize

    Measure the size of a DOM element using ResizeObserver

    Checkout the Storybook demo.

    Installation

    yarn add @charlietango/use-element-size

    API

    const [ref, size] = useElementSize()

    The hook returns an Array with a ref function, and the measured size. Assign the ref to the element you want to measure.

    Example

    import React from 'react'
    import useElementSize from '@charlietango/use-element-size'
    
    const Component = () => {
      const [ref, size] = useElementSize()
      return (
        <div ref={ref}>
          <pre>
            <code>{JSON.stringify(size, null, 2)}</code>
          </pre>
        </div>
      )
    }
    
    export default Component

    Keywords

    Install

    npm i @charlietango/use-element-size

    DownloadsWeekly Downloads

    565

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    6.73 kB

    Total Files

    6

    Last publish

    Collaborators

    • thebuilder
    • frederik_bosch