use-child-sizes v1.0.0

use-child-sizes

A React hook to get the sizes of child elements of the specified element.

Install

npm install use-child-sizes

Usage

import React from 'react'
import useChildSizes from 'use-child-sizes'

const Example = () => {
  const [ref, sizes] = useChildSizes<HTMLUListElement>()
  const maxHeight = sizes.reduce(
    (maxHeight, { height }) => (height > maxHeight ? height : maxHeight),
    0
  )

  return (
    <ul ref={ref} style={{ height: maxHeight }} className='...'>
      <li>
        <img src='...' />
      </li>
      <li>
        <img src='...' />
      </li>
      <li>
        <img src='...' />
      </li>
    </ul>
  )
}

IE?

Use ResizeObserver Polyfill.

License

MIT © Taro Hanamura