React Minimal Gallery

React Minimal Gallery is a minimalist image gallery build with tailwincss for simple projects.

Please note that the project is still under development.

Demo

Features

Thumbnail pagination
Custom styles
Responsive design

Getting started

React Minimal Gallery requires React 16.0.0 or later.

npm:

npm install react-minimal-gallery

yarn:

yarn add react-minimal-gallery

Example

import ReactMinimalGallery from 'react-minimal-gallery';

const images = [
  'https://images.pexels.com/photos/1379636/pexels-photo-1379636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
  'https://images.pexels.com/photos/2781760/pexels-photo-2781760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
  'https://images.pexels.com/photos/1525041/pexels-photo-1525041.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
];

const MyGallery: React.FC = () => {
  return (
    <ReactMinimalGallery
      images={images}
      width={400}
      height={400}
      thumbnailWidth={100}
      hoverColor="#2DC573"
    />
  )
}

Props

Available Properties
images - array of objects with title and url properties
containerClassName - string with tailwindcss properties
mainImageClassName - string with tailwindcss properties
hoverColor - string with hex color
width - string or number
height - string or number
thumbnailWidth - string or number

To customize tailwindcss properties use the prefix 'tw-'.

Example:

  const MyGallery: React.FC = () => {
    return (
      <ReactMinimalGallery
        containerClassName="tw-bg-red-500"
        mainImageClassName="tw-bg-opacity-50"
      />
    )
  }

Contributing

Each PR should be specific and isolated to the issue you're trying to fix. Please do not stack features/chores/refactors/enhancements in one PR. Describe your feature/implementation in the PR. If you're unsure its useful or if it is a major change, please open an issue first and get feedback.

Follow eslint provided
Comment your code
Write clean code

Build the example locally (requires node >= 12.13)

git clone https://github.com/scarvalhos/react-minimal-gallery.git
cd react-minimal-gallery
npm install --global yarn
yarn
yarn start

Then open localhost:3000 in a browser.

License

MIT