react-lightboxable

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

Usage no npm install needed!

<script type="module">
  import reactLightboxable from 'https://cdn.skypack.dev/react-lightboxable';
</script>

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.

License: MIT Tests

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