Introduction

React Lightbox is a React plugin for implementing lightbox effect easily with React.
It provides some basic functions for you to extend including:
* Turn on/off the lightbox (openLightbox, closeLightbox)
* Communicate variables between different elements in the lightbox (setLightboxState).

Demo

Basic usage
Passing variables
Custome elements
Communication between elements

Getting started

To use the lightbox plugin, include the react library, the JSX transformer, and the react-lightbox library inside the tag of your HTML document:

Start by telling react-lightbox to render the elements you want when the document is loaded.
Just put them inside the LightboxTrigger element and LightboxModal element:

We done! That’s all you need to do!
Click on the text and you’ll see the beautiful lightbox popup on your browser!
See the Basic usage.

NOTE! react-lightbox will auto-bind openLightbox function to the onClick event of the element inside the LightboxTrigger. You don’t need to set the onClick event yourself.

If you think simply use ‘a’ tag as trigger and ‘p’ tag as the content of lightbox is too simple, you can create custom elements for both LightboxTrigger and LightboxModal:

Your custom elements inside LightboxTrigger and LightboxModal will receive ‘openLightbox’ and ‘closeLightbox’ functions automatically. Use them in whatever way you want.

The live example for above code is here: Custome elements

NOTE! If you use custom element as trigger, react-lightbox will NOT auto-bind openLightbox for you. Remember to bind it as the example shows.

Advanced

Sometimes you need to share variables between elements inside the lightbox. For instance, you want the change the text in the trigger according to the text user type into the textarea in modal. How can we deal with that?

React-lightbox provide ‘setLightboxState’ function to solve this.
First, pass the values you want to share between elements to the Lightbox element ‘data’ props:

Then you can use this values from the props:

To change the shared value, use the ‘setLightboxState’ function which all children elements will receive automatically.

What happened behind it is easy. Lightbox set the ‘data’ object as state. And then pass every value inside the state to all children as props! So every time you ‘setLightboxState’, all the elements will update automatically!

Here’s a more concrete example:

A live demo for this can be found here: Communication between elements

Download

Get the plugin on Github

Requirements

* React
* JSXTransformer