React Lightboxable - 💡 📦

Simple React.js component that displays an image on a fullscreen lightbox, toggled with a click event on the provided thumbail element.

Features

• zero external dependencies 👌;
• uses React Portals for the lightbox container 🌀;
• easily extendable and overwritable css classes 🎨;
• handles the Escape key as a medium to close the lightbox.

Installation

$ npm install --save-dev react-lightboxable

Demo

A live demo is available on Codesandbox.io

Usage

import React from 'react';

import ReactLightboxable from 'react-lightboxable';

// the thumbnail element
const Preview = _ => <img src="https://source.unsplash.com/300x200" />;
// or just <img src="https://source.unsplash.com/300x200" />

// main component
function Example () {
    return (
        <ReactLightboxable
            preview={<Preview />}
            fullWidthUrl="https://source.unsplash.com/1200x800"
            fullWidthAlt="lightbox image alt tag"
        />
    );
}

Props and usage

Super simple, just three props

prop name	description
preview	The thumbail element, can be a React component or a DOM element
fullWidthUrl	The url of the image to display in full screen inside the lightbox
fullWidthAlt	The alt tag of the image to display in full screen inside the lightbox

Css and classes overwrite

The css classes used in the default styling

class name	description
.lightboxable-modal	wrapper element for the lightbox component
.lightboxable-modal__close	close button on top right corner
.lightboxable-modal__background	dark background with click-away listener
.lightboxable-modal__image	the actual image
.lightboxable-preview	wrapper element for the thumbail component prop