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.7 · current
  • v0.1.6
  • v0.1.5
  • v0.1.4
  • v0.1.3

Changelog

v0.1.7

Patch Changes

  • 8fe9fb4: Import icons from their own packages (@behivetech/icons.<name>), and the shared stylesheet and types from @behivetech/icons.base, instead of @behivetech/atoms.icon, which no longer exists.
  • 8fe9fb4: Declare "sideEffects": ["**/*.css"] so a bundler can drop the package when its exports are unused. Packages that build class names depend on @behivetech/get-class-name (a real dependency, kept external) instead of bundling their own copy of the helper, so an app loads it once.
  • Updated dependencies [8fe9fb4]
  • Updated dependencies [8fe9fb4]
  • Updated dependencies [8fe9fb4]
  • Updated dependencies [8fe9fb4]
  • Updated dependencies [8fe9fb4]
    • @behivetech/atoms.modal@0.4.3
    • @behivetech/icons.base@0.4.0
    • @behivetech/icons.arrow-left@0.1.0
    • @behivetech/icons.arrow-right@0.1.0
    • @behivetech/icons.image@0.1.0
    • @behivetech/get-class-name@0.1.0
    • @behivetech/atoms.button@0.5.2
    • @behivetech/atoms.spinner@0.4.5
    • @behivetech/hooks.use-image-status@0.1.1

v0.1.6

Patch Changes

  • Updated dependencies [1b59e66]
  • Updated dependencies [b12f0c9]
    • @behivetech/cms.base-styles@0.5.1
    • @behivetech/atoms.button@0.5.1
    • @behivetech/atoms.modal@0.4.2

v0.1.5

Patch Changes

  • 48c9e6b: Use the shared hooks.use-image-status package instead of a local copy.
  • Updated dependencies [48c9e6b]
    • @behivetech/hooks.use-image-status@0.1.0

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.

Patch Changes

  • Updated dependencies [b356876]
  • Updated dependencies [408d5a9]
  • Updated dependencies [5cb85ef]
  • Updated dependencies [cef5a60]
    • @behivetech/atoms.button@0.5.0
    • @behivetech/atoms.icon@0.3.6
    • @behivetech/atoms.modal@0.3.0