aautio / React Modal Image
Licence: mit
A tiny React component providing modal image Lightbox.
Stars: ✭ 97
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Modal Image
Mediumlightbox
Nice and elegant way to add zooming functionality for images, inspired by medium.com
Stars: ✭ 671 (+591.75%)
Mutual labels: image, modal, lightbox
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (+329.9%)
Mutual labels: image, modal, lightbox
Basiclightbox
The lightest lightbox ever made.
Stars: ✭ 299 (+208.25%)
Mutual labels: image, modal, lightbox
Lightcase
The smart and flexible Lightbox Plugin.
Stars: ✭ 413 (+325.77%)
Mutual labels: modal, lightbox
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (+83.51%)
Mutual labels: modal, lightbox
Body Scroll Lock
Body scroll locking that just works with everything 😏
Stars: ✭ 3,357 (+3360.82%)
Mutual labels: modal, lightbox
body-scroll-freezer
↕️ Dependency-free JS module to freeze body scroll when opening modal box
Stars: ✭ 22 (-77.32%)
Mutual labels: modal, lightbox
Amplify
A tiny script allowing inline image zoom
Stars: ✭ 458 (+372.16%)
Mutual labels: image, lightbox
React Cool Portal
😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
Stars: ✭ 458 (+372.16%)
Mutual labels: modal, lightbox
Simplelightbox
Touch-friendly image lightbox for mobile and desktop
Stars: ✭ 744 (+667.01%)
Mutual labels: modal, lightbox
Glightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
Stars: ✭ 702 (+623.71%)
Mutual labels: image, lightbox
react-layer-stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 158 (+62.89%)
Mutual labels: modal, lightbox
MultiDialog
MultiDialog utilizes jQuery UI Dialog Widget for a full featured Modalbox / Lightbox application.
Stars: ✭ 23 (-76.29%)
Mutual labels: modal, lightbox
fancybox
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Stars: ✭ 7,261 (+7385.57%)
Mutual labels: modal, lightbox
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (+1189.69%)
Mutual labels: modal, lightbox
Vue Cool Lightbox
Vue.js lightbox inspired by fancybox.
Stars: ✭ 196 (+102.06%)
Mutual labels: image, lightbox
Silentbox
A lightbox inspired Vue.js component.
Stars: ✭ 196 (+102.06%)
Mutual labels: image, lightbox
Lity
Lightweight, accessible and responsive lightbox.
Stars: ✭ 1,051 (+983.51%)
Mutual labels: modal, lightbox
react-modal-image
A lightweight React component providing modal image Lightbox.
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 "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. |
hideDownload |
boolean |
Optional. Set to true to hide download-button from the Lightbox. |
hideZoom |
boolean |
Optional. Set to true to hide zoom-button from the Lightbox. |
showRotate |
boolean |
Optional. Set to true to show rotate-button within the Lightbox. |
imageBackgroundColor |
String |
Optional. 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}
/>
);
}
Prop | Type | Description |
---|---|---|
onClose |
function |
Will be invoked when the Lightbox requests to be closed |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].