react-lightboxable v1.1.1

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

Css and classes overwrite

The css classes used in the default styling