This package has been deprecated

    Author message:

    WARNING: This package has been refactored to @notthatnathan/use-element-size. Please install @notthatnathan/use-element-size instead.

    useelementwidth

    1.1.1 • Public • Published

    useElementWidth

    Pass an element ref that you’d like to observe. Its changing width is returned.

    Example:

    const Element = () => {
      const ref = useRef()
      const width = useElementWidth(ref)
    
      const classNames = width > 300 ?  styles.wide : ''
    
      return (
        <div ref={ref} className={`${styles.el} ${classNames}`} />
      )
    }
    .el {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .wide {
      flex-direction: row;
    }

    Read the blog post

    Keywords

    none

    Install

    npm i useelementwidth

    DownloadsWeekly Downloads

    12

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    17.6 kB

    Total Files

    15

    Last publish

    Collaborators

    • notthatnathan