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.

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Here's how it all looks