React Images Viewer

screenshot of React Images Viewer
react
less

React Images Viewer

A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.

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.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

less
LESS

Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.