React: Getting clientHeight of mapped images with useRef and hooks

Question

I am building a dynamic image grid and trying to find the actual height of each image in pixels to adjust the layout accordingly.

My problem is when trying to access ref.current.clientHeight which is undefined. I tried following this post How can I use multiple refs for an array of elements with hooks? but cant access the height of the image

    const Grid = ({ arr }) => {
    const ref = useRef([])
    const arrLength = arr.length;

    const [elRefs, setElRefs] = useState([])

    useEffect(()=> {
        setElRefs(elRefs => (
            Array(arrLength).fill().map((_, i) => elRefs[i] || createRef())
          ));
        },[arrLength])

    return (
        <Container>
            {arr && arr.length !== 0 ? arr.map((o, i) => {

           // I want to access the clientHeight here to pass to the GridCard component as a prop

                return (
                    <GridCard
                        key={i}
                        data={o}
                        width={"280px"}
                        height={"auto"}
                        ref={elRefs[i]}
                    >
                    </GridCard>

                )
            }) : null}
        </Container>
    );
}
export default Grid;

How would the browser know the rendering height of an element before rendering it? That makes little sense to me. — Dominik, Aug 10 '21 at 21:40
I didnt think of that. Any way to get the height would be awesome even after rendering. Any help is appreciated! — plorp, Aug 10 '21 at 21:43

score 0 · Answer 1 · answered Aug 10 '21 at 22:14

Have a look at package react-use-measure.

Sample usage:

const [ref, bounds] = useMeasure({ polyfill: ResizeObserver });
return (
    <Grid
      container
      ref={ref}
      className={clsx(classes.root, bounds.width <= 300 ? classes.narrow : undefined)}
      ...

React: Getting clientHeight of mapped images with useRef and hooks

1 Answers1