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