README

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

Usage no npm install needed!