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 Gatsby, 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

Enjoyed the article? Consider sharing it on Twitter so others can enjoy it too :)

Receive project updates, article drafts & thoughts on your inbox every saturday.

Subscribe โ†’