React Lightboxable - :bulb: :package:

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 :ok_hand:;
• uses React Portals for the lightbox container :cyclone:;
• easily extendable and overwritable css classes :art:;
• 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 |