0.1.0 • Published 2 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
2 years ago
0.0.21
2 years ago
0.0.22
2 years ago
0.0.23
2 years ago
0.0.25
2 years ago
0.0.37
2 years ago
0.0.38
2 years ago
0.0.39
2 years ago
0.0.30
2 years ago
0.0.31
2 years ago
0.0.32
2 years ago
0.0.33
2 years ago
0.0.34
2 years ago
0.0.35
2 years ago
0.0.36
2 years ago
0.1.0
2 years ago
0.0.27
2 years ago
0.0.28
2 years ago
0.0.29
2 years ago
0.0.20
2 years ago
0.0.19
2 years ago
0.0.18
2 years ago
0.0.17
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago