react-lightbox-pack

✨ 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.

🆕 Added Type Safety (Install v0.2.0)

⭐ Features

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

🔜 Support for overflow thumbnail comming soon, should be sufficient for 5-10 items 😀

🚀 Demo

• https://imshines.github.io/react-lightbox-pack/

📥 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!"
  }
]

Sample data.json (array format)

[
  "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

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