0.1.0 • Published 3 years ago
react-modal-images v0.1.0
React Modal Images
A lightweight React component providing modal image.
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. |
0.0.40
3 years ago
0.0.21
3 years ago
0.0.22
3 years ago
0.0.23
3 years ago
0.0.25
3 years ago
0.0.37
3 years ago
0.0.38
3 years ago
0.0.39
3 years ago
0.0.30
3 years ago
0.0.31
3 years ago
0.0.32
3 years ago
0.0.33
3 years ago
0.0.34
3 years ago
0.0.35
3 years ago
0.0.36
3 years ago
0.1.0
3 years ago
0.0.27
3 years ago
0.0.28
3 years ago
0.0.29
3 years ago
0.0.20
3 years ago
0.0.19
3 years ago
0.0.18
3 years ago
0.0.17
3 years ago
0.0.16
3 years ago
0.0.15
3 years ago
0.0.14
3 years ago
0.0.13
3 years ago
0.0.12
3 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago