@majoyal/react-modal-image

    2.2.2 • Public • Published

    react-modal-image

    CircleCI npm package

    A lightweight React component providing modal image Lightbox.

    DEMO

    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
    • Image alt shown as title of lightbox

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

    Simple API

    import ModalImage from 'react-modal-image'
     
    <ModalImage
      small={urlToTinyImageFile}
      large={urlToHugeImageFile}
      alt="Hello World!"
    />
    Prop Type Description
    className String Optional. class for the small preview image.
    alt String Optional. alt for the small image and the heading text in Lightbox.
    small URL src for the small preview image.
    smallSrcSet String Optional. srcSet for the small preview image.
    medium URL Optional if large is defined. Image shown when zoomed out in Lightbox.
    large URL Optional if medium is defined. Image shown when zoomed in Lightbox. Downloadable.

    Lightbox-only API

    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}
        />
      );
    }
    Prop Type Description
    onClose function Will be invoked when the Lightbox requests to be closed

    Install

    npm i @majoyal/react-modal-image

    DownloadsWeekly Downloads

    1

    Version

    2.2.2

    License

    MIT

    Unpacked Size

    44.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • majoyal