React Images Viewer

Overview

The React Images Viewer is a library that allows users to easily view and display a list of photos using a responsive viewer component. It provides a simple and intuitive way to navigate through an array of images.

Features

• Backdrop Closeable: Allows users to exit the viewer by clicking the backdrop.
• Close Button Title Customization: Customize the title of the close button when using the escape key.
• Keyboard Input Support: Supports keyboard input for navigation using keys such as space, escape, arrow keys, etc.
• Initial Image Index: Required if you want to navigate through the images. Specifies the index of the image to display initially.
• Custom Controls: Add custom controls on top of the viewer by providing an array of elements.
• Image Array: Required. Provides an array of image objects.
• Image Count Separator Customization: Customize the separator used in the image count.
• Viewer Visibility: Required if you want to navigate through the images. Specifies whether the viewer is displayed or not.
• Custom Titles: Customize the titles of the left and right navigation arrows.
• Navigation Callbacks: Handle navigation to previous, next, and closing of the viewer.
• Click Callback: Handle click on the current image.

Installation

To install the React Images Viewer library, you can follow these steps:

1. Install the library using npm or yarn:

npm install react-images-viewer

or

yarn add react-images-viewer

2. Import the library in your React component:

import ImagesViewer from 'react-images-viewer';

3. Use the ImagesViewer component in your code:

<ImagesViewer
  backdropCloseable={true}
  closeBtnTitle="Close"
  enableKeyboardInput={true}
  currImg={0}
  customControls={[<CustomControl1 />, <CustomControl2 />]}
  imgs={[{ src: 'image1.jpg' }, { src: 'image2.jpg' }]}
  imgCountSeparator=" / "
  isOpen={true}
  leftArrowTitle="Previous Image"
  onClickPrev={handlePreviousImage}
  onClickNext={handleNextImage}
  onClose={handleCloseViewer}
  onClickImg={handleClickImage}
/>

Summary

The React Images Viewer is a useful library for easily displaying and navigating through a list of photos in a responsive viewer component. It provides various customization options and supports keyboard input for intuitive navigation. With the ability to add custom controls and handle navigation callbacks, it offers flexibility in integrating it into different projects.