lightbox

A minimal lightbox package for react

Jul 29, 2021
A minimal lightbox package for react

React LightBox Pack

A Lightweight NPM LightBox Package built with simplicity in mind. Since it's built from Scratch it doesn't need any additional dependencies to work.

View Demo View Github

⭐ Features

  • Built from scratch 👨‍💻⚡
  • Crafted for React ⚛
  • No additional dependency used ❤
  • Customizable 🎨

📥 Installation

npm install react-lightbox-pack
or
npm i react-lightbox-pack

🍔 Usage

Example code below shows how the Image LightBox pack can be used with sample json data.

App.js

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 ( <div> // data should be an array of object {data.map((item, index) => ( <> <img key={item.id} src={item.image} alt={item.title} style={{ maxHeight: "80vh", maxWidth: "50vw" }} onClick={() => { lightBoxHandler(true, index); }} /> </> ))} //Component <LightBox state={toggle} event={lightBoxHandler} data={data} imageWidth="60vw" imageHeight="70vh" thumbnailHeight={50} thumbnailWidth={50} setImageIndex={setSIndex} imageIndex={sIndex} /> </div> ); }

Sample data.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!" } ]

Props

propstype
stateaccepts state with boolean
eventaccepts an event with state, selected index argument
dataaccepts an array of object with photos
sIndexaccepts a state with number default as 0
imageWidthaccepts size as string or number
imageHeightaccepts size as string or number
thumbnailHeightaccepts size as string or number
thumbnailWidthaccepts size as string or number
Recommended