Ghost Gallery in React

import React, { useEffect } from 'react'
import useGallery from '../hooks/useGallery'

const Gallery = ({ children, caption }) => {
	const [rows, resizeOnLoad] = useGallery(children)

	useEffect(resizeOnLoad, [])

	return (
		<figure>
			<div className="flex flex-col mx-auto my-6 max-w-5xl">
				{rows.map((images, i) => (
					<div className={`flex flex-row justify-center${i == 0 ? '' : ' mt-3'}`} key={i}>
						{images.map((image, i) => (
							<div key={i} ref={image.ref} className={i === 0 ? '' : 'ml-3'} style={{ flex: `${image.width / image.height} 1 0%` }}>
								{image.el}
							</div>
						))}
					</div>
				))}
			</div>
			{caption && <figcaption>{caption}</figcaption>}
		</figure>
	)
}

export default Gallery