Github
Check the project on Github to read the full documentation
michelecocuccio
/
simple-react-lightbox
A simple but functional light-box for React.
Simple React Light-box (SRL)
Documentation: quick links
- A brief introduction
- Demo on CodeSandbox
- Get started
- Options
-
Custom Captions
🆕 - Callbacks
- Custom Hook
- A note on "slide" animation and Firefox
What's new in Version 3.0
-
⚠️ HEADS UP! The value for the following options in the settings object have been changed from milliseconds to seconds.slideTransitionSpeed,lightboxTransitionSpeed. If you see a really slow animation is likely because you have forget to change the value.⚠️ -
🆕 (added in 3.1) Custom captions are now a thing. I have listened to some feedbacks and now you can make a custom caption with HTML markup and add it to a specific image. Read carefully the documentation on custom captions to see how to use it. -
New physics animations for the light-box have been added for realistic motion. The images can now have a "slide" animation where they slide left and right. They…
A brief introduction 🧐
It all started when I was working on one of my project using React. The client had a blog page and he wanted to add a light-box to the images in the blog posts. The problem is that the data was fetched from the backend and I had no control over the content of each post (the content was in a WYSIWYG editor).
I checked online for some light-box for React but the way that they were working was that I had to declare the images beforehand in either an array, an object etc...but what if you don't know about the content and you just want to add a light-box to the images? 😞
My Idea 💡
Simple React Lightbox gives you the ability to add a light-box functionality on a set of images, whether you define them yourself or you get them from an external source (API, backend etc…). Just use the provided component to wrap your app, define your options and then use the "SRLWrapper" component by wrapping it around the content in which you have or expect your images 😮! It takes less than 1 minute to implement it.
Each light-box is individually configurable both in terms of styles and options. That means that you can easily adapt the style of the light-box to your project.
Packed with features 📦
Simple React Lightbox comes with many features: please check the options section to see the full list of options. Some features are:
- PanZoom: allows to zoom on an image and drag it to see all the hidden details!
- Autoplay: allows to automatically go to the next image after a set amount of time (which can be configured)
- Image validation: excludes broken images so that they will be ignored by the light-box (if you click on a broken images the light-box won't open)
- Fully customisable: buttons, caption and background colour can be fully customised
- Naturally responsive: Simple React light-box is responsive and supports touch controls. I have also provided clear class names for each part of the light-box in case you need more granular control.
Demo
I have provided a working demo on CodeSandbox where you can also play with the options and see the light-box in action. This is the same as running the demo locally.
Images
Top comments (1)
Hi, promising React package! I think if the Codesandbox Demo would work, it would give you a leg up on popularity. Currently it just not load for me in Codesandbox (Firefox and Chrome).