@kaliber/use-element-size

    3.0.1 • Public • Published

    useElementSize

    Read the height and width of an element

    Motivation

    Determines the width and height (in pixels) of an element through ResizeObserver. This is more performant and easier to use than listening to a resize event and reading the element's size through getBoundingClientRect or getComputedStyle, which run on the main thread and can trash layout. Note that the hook is only updated when the element's size changes, not when the window's size changes.

    Polyfill

    At the time of writing, ResizeObserver is not yet supported by all current browsers. There is a polyfill available through polyfill.io.

    Using @kaliberjs/build, you can add the following argument to the polyfill() call.

    {polyfill(['default', 'ResizeObserver'])}
    

    Without, you can manually add the following script to your page (or include it in your build):

    https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver
    

    Installation

    yarn add @kaliber/use-element-size
    

    Usage

    Basic

    import { useElementSize }  from '@kaliber/use-element-size'
    
    function Component() {
      const { size: { width, height }, ref: elementRef } = useElementSize()
      return <div ref={elementRef}>{width}px × {height}px</div>
    }

    Animate height

    .component {
      overflow: hidden;
      transition: height 0.5s;
    }
    import { useElementSize } from '@kaliber/use-element-size'
    
    export function Expand({ children, expanded }) {
      const { size: { height }, ref: innerRef } = useElementSize()
    
      return (
        <div 
          className={styles.component} 
          style={{ height: expanded ? height + 'px' : '0px' }}
        >
          <div ref={innerRef}>
            {children}
          </div>
        </div>
      )
    }

    Disclaimer

    This library is intended for internal use, we provide no support, use at your own risk. It does not import React, but expects it to be provided, which @kaliber/build can handle for you.

    This library is not transpiled.

    Install

    npm i @kaliber/use-element-size

    DownloadsWeekly Downloads

    19

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    4.73 kB

    Total Files

    6

    Last publish

    Collaborators

    • jerryduijm
    • hjsielcken
    • rmostertkaliber
    • kaliber-owner
    • daveykropf
    • eecolor
    • pkuepers
    • larsvankleef