Socket
Socket
Sign inDemoInstall

react-images-viewer

Package Overview
Dependencies
22
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-images-viewer

Create an react-images-viewer component.


Version published
Maintainers
1
Weekly downloads
5,640
decreased by-12.27%

Weekly downloads

Readme

Source

react-images-viewer

Build Status

jest

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

中文文档

Quick start

# recommended
yarn add react-images-viewer

or

npm install react-images-viewer --save
import React from "react";
import ImgsViewer from "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}
      />
    );
  }
}

Demo & Example

Live Demo: guonanci.github.io/react-images-viewer

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

PropertyTypeDefaultDescription
backdropCloseablebooleanfalseAllow users to exit the viewer by clicking the backdrop
closeBtnTitlestrundefinedCustomize close esc title
enableKeyboardInputbooleantrueSupports keyboard input - space, esc, arrow left, arrow up, and arrow right, arrow down
currImgnumber0Required if you want to navigate the imgsViewer, The index of the image to display initially
customControlsarrundefinedAn array of elements to display as custom controls on the top of viewer
imgsarrundefinedRequired. Array of image objects, See img opts table below
imgCountSeparatorstr' / 'Customize separator in the image count
isOpenbooleanfalseRequired if you want to navigate the imgsViewer, Whether or not the viewer is displayed
leftArrowTitlestrundefinedCustomize of left arrow title
onClickPrevfunctionundefinedRequired if you want to navigate the imgsViewer, and fired on request of the previous image
onClickNextfunctionundefinedRequired if you want to navigate the imgsViewer, and fired on request of the next image
onClosefunctionundefinedRequired if you want to close the imgsViewer, and handle closing of the viewer
onClickImgfunctionundefinedHandle click on current image
onClickThumbnailfunctionundefinedHandle click on thumbnail
preloadNextImgbooleantrueWhether to preload the next available image
rightArrowTitlestrundefinedCustomize right arrow title
showCloseBtnbooleantrueOptionally display a close 'X' button in top right corner
showImgCountbooleantrueOptionally display image index, e.g., "2 of 20"
widthnumber1024Maximum width of the carousel; defaults to 1024px
spinnerDisabledbooleanfalseDisable Spinner
spinnerfunctionDefaultSpinnerSpinner component class
spinnerColorstr'#fff'Color of spinner
spinnerSizenumber50Size of spinner
preventAutoScrollbooleantrueDetermines 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 |

Keywords

FAQs

Last updated on 20 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc