Snippet

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

Context

When migrating this site from Ghost to Next, I had to recreate Ghost's Gallery component in React. The Gallery component takes care of presentation and styling (using Tailwind), and the useGallery hook takes care of the logic.

null
null
null
null
null
null
null
Here's how it looks