A responsive masonry image grid that opens a swipeable, keyboard-navigable lightbox. Tiles keep each image's ratio, captions show in the lightbox only, and the lightbox is a fullscreen `Modal`.
pnpm add @behivetech/organisms.gallery
Published to npm.pkg.github.com
v0.1.4 · current
v0.1.3
Changelog
v0.1.4
Patch Changes
cb4aabe: Gallery, SiteFooter and SiteHeader now list @behivetech/cms.base-styles in dependencies instead of devDependencies, because their shipped .module.scss source @uses its breakpoints. A consumer compiling the source gets the package installed. The published dist/index.css is unchanged.
Updated dependencies [00e81c9]
Updated dependencies [6534e7a]
@behivetech/atoms.modal@0.4.1
@behivetech/atoms.icon@0.3.8
v0.1.3
Patch Changes
Updated dependencies [5593d1c]
Updated dependencies [0e4857f]
@behivetech/atoms.modal@0.4.0
@behivetech/atoms.icon@0.3.7
v0.1.2
Patch Changes
d20ef90: Document that gallery tiles crop images taller than about 3:1 (the row span is capped at 150 rows), and split GalleryLightbox and Gallery into smaller components and hooks with no change in behaviour.
v0.1.1
Patch Changes
8b80e3c: Draw the thumbnail hover glow with the --brand-glow-violet token, so it is transparent in Light and violet in Dark like the ImageCard glow.
v0.1.0
Minor Changes
cef5a60: Add Gallery: a responsive masonry image grid that opens a swipeable, keyboard-navigable lightbox on a fullscreen Modal. columns takes a number or { xs, md, lg } (default { xs: 2, md: 3, lg: 4 }), renderImage lets an app pass next/image, and the lightbox does not wrap.