React-lightbox-pro

Lightbox is a popular and widely used concept for showing the gallery of media files. It is a very impressive approach for the end user to glance through media files. Media files like audio or video will load the html audio or video controls.

Lightbox is a UI component which will be a simple, unobtrusive script used to overlay images on the current page. It is an elegant way to slide over the image gallery. It's a snap to setup and works on all modern browsers. It will blur the whole web page and show one of the images in the gallery which will avoid the screen size constraints. It will also keep the user on the same page and has next and previous controls to move between the images in the gallery. To return to the actual screen, we would have the close button to close the image lightbox modal and show the actual page. Having the count and slide position will be intuitive to the user for easy location of images in the gallery.

Install Steps

  npm i react-lightbox-pro

Media Type Supports

Image , Video and Audio

Features

• Caption Options available
• Base64 Support
• Images Support
• Videos Support
• Audio Support
• Current Slide Option Available
• Custom Show Prev and Show Next
• Download Option --> Available Soon
• Share Option --> Available Soon
• Zoom In and Zoom Out Options
• FullScreen Mode
• Next-js Support --> Soon

Example Code

  import { LightBox } from "react-lightbox-pro"
  export function LightBoxExample() {
  const [toggler, setToggler] = useState(false);
  const data = [
    {
      media: "https://picsum.photos/200/300",
      type: "IMAGE",
      caption: "React Image",
    },
    // without caption
    {
      media: "https://picsum.photos/200/300",
      type: "IMAGE",
    },
    {
      media: "http://techslides.com/demos/sample-videos/small.mp4",
      type: "VIDEO",
      caption: "Sample Video with Caption",
    },
    {
      media: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
      type: "AUDIO",
    },
  ];
  return (
    <>
      <button
        onClick={() => {
          setToggler(true);
        }}
      >
        Click to Open LightBox
      </button>
       <LightBox mediaItems={data} toggler={toggler} togglerFunc={setToggler} />
    </>
  );
}

Sample Output

Sample Image

Sample Video with Captions

Sample Audio

Props

| Name | Type | Description | | -------------- | -------- | ----------------------------------------------------- | | currentSlide | number | The index of the current slide in the mediaItems array | | callback | void | A callback function | | mediaItems | array | An array of media items | | toggler | boolean | A flag indicating whether the toggler is active or not | | parentShowPrev | void | A function passed from the parent to show the previous slide | | parentShowNext | void | A function passed from the parent to show the next slide | | togglerFunc | void | A function to handle the toggler |

In the table, each prop is described with the following information:(tip: 1. void means function ,2. if you are facing any type-error use any)

Name: The name of the prop. Type: The expected data type of the prop. Description: A brief description of what the prop is used for.

Happy Coding :)

Special Thanks to Nagappan