Skip to content
No description, website, or topics provided.
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit f844b9f Oct 31, 2019


This package is react wrapper for: lightgallery.js

npm GitHub issues npm bundle size


yarn add react-lightgallery


npm install --save react-lightgallery

Run example

git clone
# go to project folder
cd ./react-lightgallery
# install dependencies
yarn install
# run example
yarn start:example

Live demo

Edit react-lightgallery1


Import .css file in your code:

// some Root.js file
import "lightgallery.js/dist/css/lightgallery.css";

Add the provider to your a high-level component

// some Root.js file
import React from "react";
import { LightgalleryProvider } from "react-lightgallery";

class App extends React.Component {
    render() {
        return (
                        // settings:
                // your components

The Provider is the manager of photo-groups in a case when you want to have several sets of photos, also this is settings storage for lightgallery.js

Wrap some elements by <LightgalleryItem>

// some PhotoItem.js file
import { LightgalleryItem } from "react-lightgallery";

const PhotoItem = ({ image, url, title }) => (
        <LightgalleryItem group="any" src={image}>
            <a href={url}>
                <img src={image} />



Prop Type Default Required Description
lightgallerySettings Object {} no Setting for lightgallery. More information
galleryClassName String "react_lightgallery_gallery" no Class name of gallery target element
portalElementSelector String body no Portal target element for adding divelement(lightgallery target element)

Supported Events

You can access to events by using these props:

Prop Type
onAfterOpen Function
onSlideItemLoad Function
onBeforeSlide Function
onAfterSlide Function
onBeforePrevSlide Function
onBeforeNextSlide Function
onDragstart Function
onDragmove Function
onDragend Function
onSlideClick Function
onBeforeClose Function
onCloseAfter Function

Example of using events:

class App extends React.Component {
    render() {
        return (
                onAfterSlide={(event) => {
                    console.log(`Prev slide index: ${event.detail.prevIndex}; Current index: ${event.detail.index}`)
                // your components


Prop Type Default Required Description
group String undefined yes Name of group of photos set
src String undefined yes Url to image
downloadUrl String undefined no Link for download link
subHtml String undefined no id or class name of an object(div) which contain your sub html.
itemClassName String "react_lightgallery_item" no class name of wrapper(div) of children


  • Access to specific events through LightgalleryItem, like: onOpen, onLeave, onEnter
  • More options from lightgallery for LightgalleryItem
  • Optional plugins
  • Support of video
  • Write tests
  • Write d.ts
You can’t perform that action at this time.