Skip to content

imshines/react-lightbox-pack

Repository files navigation

✨ 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

📥 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