0.1.4 • Published 1 year ago
react-square-image-gallery v0.1.4
React square image gallery
Simple square image gallery for React
Live Demo
Demo react-square-image-gallery
Features
- Square image gallery
- Image detail view
- Responsive
- Keyboard navigation support
- React / Typescript
Installation
React Image Gallery requires React 16.0.0 or later.
npm install react-square-image-galleryQuick Start
import SquareImageGallery, { Image } from 'react-square-image-gallery';
import 'react-square-image-gallery/src/styles/style.css';
const images: Image[] = [
{
imageSrc: 'https://picsum.photos/id/659/700/700',
imageTitle: 'Husky',
},
{
imageSrc: 'https://picsum.photos/id/433/1000/1000',
imageTitle: 'Bear',
},
{
imageSrc: 'https://picsum.photos/id/582/1000/1300',
imageTitle: 'Fox',
},
{
imageSrc: 'https://picsum.photos/id/593/1800/1300',
imageTitle: 'Tiger',
},
];
<SquareImageGallery images={images} />;Props
| Name | Type | Default Value | Description |
|---|---|---|---|
| images | Image[] (see below) | Required. Images displayed in gallery | |
| imagesGap? | string | "0.5rem" | Optional. Gap between images in gallery grid |
| showTitles? | boolean | false | Optional. Show image's titles in image detail |
| dark? | boolean | false | Optional. Dark mode |
| customPrev? | React.ReactNode | Optional. Custom element for prev button in image detail | |
| customNext? | React.ReactNode | Optional. Custom element for next button in image detail | |
| customClose? | React.ReactNode | Optional. Custom element for close button in image detail |
Image type
Custom type for one image in gallery
type Image = {
/*
Path to the image absolute or relative
*/
imageSrc: string;
/*
Optional. Path to the image in detail view
*/
imageDetailSrc?: string;
/*
Title of image, used for image alt if imageAlt not set
*/
imageTitle: string;
/*
Optional. Image alt
*/
imageAlt?: string;
};