React Modal Images

A lightweight React component providing modal image.

Live DEMO

Features

  • Only 2.3 kB when gzipped.
  • Zero dependencies.
  • Includes builds for CommonJS and ES modules.
  • For React 16.x, 17.x and 18.x.
  • Download and Zoom Buttons can be hidden.
  • Image alt shown as title of Modal Image.
  • Background color of transparent images can be overridden.

Usage

import React from 'react';
import { RModalImages } from 'react-modal-images';

interface IAppProps {}

export const App: React.FC<IAppProps> = () => {
    return (
        <div className="App">
            <RModalImages
                small={'https://dummyimage.com/420x200/000/aaa'}
                medium={'https://dummyimage.com/720x400/000/aaa'}
                large={'https://dummyimage.com/1020x800/000/aaa'}
                alt={'An alternate text for this image'}
            />
        </div>
    );
};
Prop Type Description
className string Optional. Class name for the small preview image.
alt string Optional. An alternate text for the small image.
small string Required. Src for the small preview image.
smallSrcSet string Optional. SrcSet for the small preview image.
medium string Optional. If large is defined. Image shown when zoomed out in modal.
large string Optional. If medium is defined. Image shown when zoomed in modal. Downloadable.
hideDownloadButton boolean Optional. Set to true to hide download-button from the modal.
hideZoomButton boolean Optional. Set to true to hide zoom-button from the modal.
hideRotateButton boolean Optional. Set to true to hide rotate-button within the modal.
imageBackgroundColor string Optional. Background color of the image shown in modal. Defaults to black.

GitHub

View Github