https://github.com/specter256/react-simple-image-viewer
Simple image viewer component for React
https://github.com/specter256/react-simple-image-viewer
gallery image image-viewer images lightbox react reactjs
Last synced: about 1 year ago
JSON representation
Simple image viewer component for React
- Host: GitHub
- URL: https://github.com/specter256/react-simple-image-viewer
- Owner: specter256
- License: mit
- Created: 2019-09-07T10:13:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-08-26T06:27:16.000Z (almost 2 years ago)
- Last Synced: 2025-05-04T02:40:30.631Z (about 1 year ago)
- Topics: gallery, image, image-viewer, images, lightbox, react, reactjs
- Language: TypeScript
- Size: 160 KB
- Stars: 70
- Watchers: 2
- Forks: 28
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Simple Image Viewer
[](https://badge.fury.io/js/react-simple-image-viewer)
[](https://travis-ci.org/specter256/react-simple-image-viewer)
Simple image viewer component for React.
# Installation
```shell
$ npm install react-simple-image-viewer
```
or
```shell
$ yarn add react-simple-image-viewer
```
# Example
```jsx
import React, { useState, useCallback } from 'react';
import { render } from 'react-dom';
import ImageViewer from 'react-simple-image-viewer';
function App() {
const [currentImage, setCurrentImage] = useState(0);
const [isViewerOpen, setIsViewerOpen] = useState(false);
const images = [
'http://placeimg.com/1200/800/nature',
'http://placeimg.com/800/1200/nature',
'http://placeimg.com/1920/1080/nature',
'http://placeimg.com/1500/500/nature',
];
const openImageViewer = useCallback((index) => {
setCurrentImage(index);
setIsViewerOpen(true);
}, []);
const closeImageViewer = () => {
setCurrentImage(0);
setIsViewerOpen(false);
};
return (
{images.map((src, index) => (
openImageViewer(index) }
width="300"
key={ index }
style={{ margin: '2px' }}
alt=""
/>
))}
{isViewerOpen && (
)}
);
}
render(, document.getElementById('app'));
```
# Demo
[Try out demo on CodeSandbox](https://codesandbox.io/s/react-simple-image-viewer-demo-4itlr)
# API
| Property | Type | Description |
| :-------------- | :-------- | :-------------------------------------------------------------------------------- |
| src | string[] | Array of image URLs |
| currentIndex | number | Index of image in `src` property which will be shown first when viewer is opened |
| onClose | function | Callback which will be called when viewer will closed |
| backgroundStyle | object | Custom styles for background of modal window |
| disableScroll | boolean | Disable scrolling images by mouse wheel |
| closeOnClickOutside | boolean | Whether viewer should be closed when clicking outside of image |
| closeComponent | JSX.Element | Custom component for the close button |
| leftArrowComponent | JSX.Element | Custom component for the left arrow |
| rightArrowComponent | JSX.Element | Custom component for the right arrow |
# Shortcuts
| Shortcut | Description |
| :-------------- | :------------------------------ |
| Escape | Close the viewer |
| Right Arrow / l | Next image |
| Left Arrow / h | Previous image |
| Mouse wheel | Scrolling previous / next image |