jsx
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.