react-simple-gallery

Simple image gallery for React applications

Features

• Zero dependencies
• Written in TypeScript
• Size: ~21KB and ~6KB Gzipped
• Configurable layout (using CSS)
• Does not support IE11

React simple gallery exports 2 bundles - one for react and one for preact. However preact support is limited - it only works when it gets bundled with Webpack 5 ([email protected] is still using webpack 4). As a result, preact version of the library has only been tested with gatsby-plugin-preact in latest version of Gatsby build environment.

⚡️ Quick Start

This package can be installed with npm

npm install @designus/react-simple-gallery

or yarn:

yarn add @designus/react-simple-gallery

Examples

Simple example

import { Gallery, GalleryImage } from '@designus/react-simple-gallery';
import image1 from './assets/1.jpg';
import image2 from './assets/2.jpg';
import image3 from './assets/3.jpg';

function SimpleGallery() {
  const images: GalleryImage[] = [image1, image2, image3].map((photo, index) => ({
    full: photo,
    thumb: photo,
    title: `Photo ${index}`
  }))

  return (
    <Gallery images={images} />
  );
}

Gatsby Image support

// ...

function SimpleGallery() {
  return (
    <Gallery 
      images={images}
      renderThumbImage={image => (
        <GatsbyImage
          image={image.thumb}
          alt={image.alt}
        />
      )}
      renderFullImage={image => (
        <div className="w-full">
          <GatsbyImage
            image={image.full}
            alt={image.alt}
            title={image.title}
            objectFit="cover"
          />
        </div>
      )}
    />
  );
}

Configuration

React simple gallery supports the following props:

| Prop | Type | Default value | Description | | ----------------- | ------------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------- | | images | GalleryImage[] | [] | An array of images to be displayed | | className | string | '' | Custom class name that can be used to change the layout | | transition | 'none \| fade \| slide' | none | A transition used when navigating from one image to the next in a lightbox | | renderThumbImage | (image: GalleryImage) => JSX.Element | (image: GalleryImage) => <img src={image.thumb} /> | A custom renderer for a thumb image | | renderFullImage | (image: GalleryImage) => JSX.Element | (image: GalleryImage) => <img src={image.full} /> | A custom renderer for a full image |