@haz3l/react-images-viewer

A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images (Updated version of guonanci/react-images-viewer with React 18 support).

Quick start

# recommended
yarn add @haz3l/react-images-viewer

or

npm install @haz3l/react-images-viewer --save

import React from "react";
import ImgsViewer from "@haz3l/react-images-viewer";

export default class Demo extends React.Component {
  render() {
    return (
      <ImgsViewer
        imgs={[
          { src: "http://example.com/img1.jpg" },
          { src: "http://example.com/img2.png" },
        ]}
        currImg={this.state.currImg}
        isOpen={this.state.viewerIsOpen}
        onClickPrev={this.gotoPrevious}
        onClickNext={this.gotoNext}
        onClose={this.closeViewer}
      />
    );
  }
}

yarn install
yarn
yarn start

Then open localhost:8000 in a browser.

Using srcSet

Example using srcSet:

<ImgsViewer
  imgs={IMG_SET}
  ...
/>

const IMG_SET = [
  {
    src: "http://example.com/img1.svg",
    caption: "A forest",
    // As an array
    srcSet: [
      "http://example.com/img1_1024.jpg 1024w",
      "http://example.com/img1_800.jpg 800w",
      "http://example.com/img1_500.jpg 500w",
      "http://example.com/img1_320.jpg 320w",
    ],
  },
  {
    src: "http://example.com/img2.svg",
    // As a string
    srcSet:
      "http://example.com/img2_1024.jpg 1024w, http://example.com/img2_800.jpg 800w, http://example.com/img2_500.jpg 500w, http://example.com/img2_320.jpg 320w",
  },
];

Options

| Property | Type | Default | Description | | :------------------ | :--------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------ | | backdropCloseable | boolean | false | Allow users to exit the viewer by clicking the backdrop | | closeBtnTitle | str | undefined | Customize close esc title | | enableKeyboardInput | boolean | true | Supports keyboard input - space, esc, arrow left, arrow up, and arrow right, arrow down | | currImg | number | 0 | Required if you want to navigate the imgsViewer, The index of the image to display initially | | customControls | arr | undefined | An array of elements to display as custom controls on the top of viewer | | imgs | arr | undefined | Required. Array of image objects, See img opts table below | | imgCountSeparator | str | ' / ' | Customize separator in the image count | | isOpen | boolean | false | Required if you want to navigate the imgsViewer, Whether or not the viewer is displayed | | leftArrowTitle | str | undefined | Customize of left arrow title | | onClickPrev | function | undefined | Required if you want to navigate the imgsViewer, and fired on request of the previous image | | onClickNext | function | undefined | Required if you want to navigate the imgsViewer, and fired on request of the next image | | onClose | function | undefined | Required if you want to close the imgsViewer, and handle closing of the viewer | | onClickImg | function | undefined | Handle click on current image | | onClickThumbnail | function | undefined | Handle click on thumbnail | | preloadNextImg | boolean | true | Whether to preload the next available image | | rightArrowTitle | str | undefined | Customize right arrow title | | showCloseBtn | boolean | true | Optionally display a close 'X' button in top right corner | | showImgCount | boolean | true | Optionally display image index, e.g., "2 of 20" | | width | number | 1024 | Maximum width of the carousel; defaults to 1024px | | spinnerDisabled | boolean | false | Disable Spinner | | spinner | function | DefaultSpinner | Spinner component class | | spinnerColor | str | '#fff' | Color of spinner | | spinnerSize | number | 50 | Size of spinner | | preventAutoScroll | boolean | true | Determines whether auto-scrolling is prevented |

Images Object

| Property | Type | Default | Description | | :------- | :-------- | :---------- | :---------- | -------- | | src | str | undefined | Required | | srcSet | string[] | string | undefined | Optional | | caption | str | undefined | Optional | | alt | str | undefined | Optional |