2.5.2 • Published 3 years ago

@avidian/react-modal-image v2.5.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@avidian/react-modal-image

CircleCI npm package

A lightweight React component providing modal image Lightbox.

DEMO

Installation

npm install @avidian/react-modal-image
yarn add @avidian/react-modal-image

Features

  • Only 3 kB when gzipped.
  • Zero dependencies.
  • Includes builds for CommonJS and ES modules.
  • For React 15.x and 16.x.
  • Esc, Enter & click outside the image close the lightbox
  • User can zoom & move the image or download the highest quality one
  • Download and Zoom -buttons can be hidden.
  • Image alt shown as title of lightbox
  • Background color of transparent images can be overridden.

You need to bring your own Set polyfill if you use old Internet Explorers.

Simple API

import ModalImage from "@avidian/react-modal-image";

<ModalImage
  small={urlToTinyImageFile}
  large={urlToHugeImageFile}
  alt="Hello World!"
/>;
PropTypeDescription
classNameStringOptional. class for the small preview image.
altStringOptional. alt for the small image and the heading text in Lightbox.
smallURLsrc for the small preview image.
smallSrcSetStringOptional. srcSet for the small preview image.
mediumURLOptional if large is defined. Image shown when zoomed out in Lightbox.
largeURLOptional if medium is defined. Image shown when zoomed in Lightbox. Downloadable.
hideDownloadbooleanOptional. Set to true to hide download-button from the Lightbox.
hideZoombooleanOptional. Set to true to hide zoom-button from the Lightbox.
showRotatebooleanOptional. Set to true to show rotate-button within the Lightbox.
imageBackgroundColorStringOptional. Background color of the image shown in Lightbox. Defaults to black. Handy for transparent images.

Lightbox-only API for advanced usage

You can also choose to import only the Lightbox.

To use the Lightbox only, you'll need to handle the open state by yourself:

import { Lightbox } from "react-modal-image";

// ...

const closeLightbox = () => {
  this.state.open = true;
};

// ...

{
  this.state.open && (
    <Lightbox
      medium={urlToLargeImageFile}
      large={urlToHugeImageFile}
      alt="Hello World!"
      onClose={this.closeLightbox}
    />
  );
}
PropTypeDescription
onClosefunctionWill be invoked when the Lightbox requests to be closed