A minimal lightbox package for react with required features
npm install react-lightbox-packA Lightweight NPM LightBox Package built with simplicity in mind. Since it's built from Scratch it doesn't need any additional dependencies to work.
š Support for overflow thumbnail comming soon, should be sufficient for 5-10 items š
npm install react-lightbox-pack
ornpm i react-lightbox-pack
Example code below shows how the Image LightBox pack can be used with sample json data.
#### App.js
``javascript
import React from "react";
import { Lightbox } from "react-lightbox-pack"; // <--- Importing LightBox Pack
import "react-lightbox-pack/dist/index.css";
import data from "./data.json"; // <--- Importing Sample JSON Data
const App = () => {
// State
const [toggle, setToggle] = React.useState(false);
const [sIndex, setSIndex] = React.useState(0);
// Handler
const lightBoxHandler = (state, sIndex) => {
setToggle(state);
setSIndex(sIndex);
};
return (
#### Sample data.json
`json
[
{
"id": 1,
"image": "https://picsum.photos/200/800",
"title": "Lorem Ipsum",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda, velit explicabo non at consequuntur accusamus hic optio alias error nisi sunt sint veniam aperiam similique dolor fugit itaque minima!"
},
{
"id": 2,
"image": "https://picsum.photos/300/200",
"title": "Lorem Ipsum",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda, velit explicabo non at consequuntur accusamus hic optio alias error nisi sunt sint veniam aperiam similique dolor fugit itaque minima!"
},
{
"id": 3,
"image": "https://picsum.photos/800/200",
"title": "Lorem Ipsum",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda, velit explicabo non at consequuntur accusamus hic optio alias error nisi sunt sint veniam aperiam similique dolor fugit itaque minima!"
},
{
"id": 4,
"image": "https://picsum.photos/500/800",
"title": "Lorem Ipsum",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda, velit explicabo non at consequuntur accusamus hic optio alias error nisi sunt sint veniam aperiam similique dolor fugit itaque minima!"
},
{
"id": 4,
"image": "https://picsum.photos/500",
"title": "Lorem Ipsum",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda, velit explicabo non at consequuntur accusamus hic optio alias error nisi sunt sint veniam aperiam similique dolor fugit itaque minima!"
}
]
`$3
`json
[
"https://picsum.photos/200/800",
"https://picsum.photos/300/200",
"https://picsum.photos/800/200",
"https://picsum.photos/500/800",
"https://picsum.photos/500"
]
``| props | type |
| --------------- | ------------------------------------------------------------------ |
| state | accepts state with boolean |
| event | accepts an event with state, selected index argument |
| data | accepts an array of object with image urls, description, title, id |
| dataArr | accepts an array image urls |
| sIndex | accepts a state with number default as 0 |
| imageWidth | accepts size as string or number |
| imageHeight | accepts size as string or number |
| thumbnailHeight | accepts size as string or number |
| thumbnailWidth | accepts size as string or number |