About

This package is react wrapper for: lightgallery.js

Installation

yarn add react-lightgallery

or

npm install --save react-lightgallery

Run example

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

Live demo

Usage

Import .css file in your code:

// some Root.js fileimport"lightgallery.js/dist/css/lightgallery.css";

Add the provider to your a high-level component

// some Root.js fileimportReactfrom"react";import{LightgalleryProvider}from"react-lightgallery";classAppextendsReact.Component{render(){return(<LightgalleryProviderlightgallerySettings={{// settings: https://sachinchoolur.github.io/lightgallery.js/docs/api.html}}galleryClassName="my_custom_classname">
// your components
</LightgalleryProvider>);}}

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 fileimport{LightgalleryItem}from"react-lightgallery";constPhotoItem=({ image, url, title })=>(<div><LightgalleryItemgroup="any"src={image}><ahref={url}><imgsrc={image}/><ItemTitle><LinesEllipsistext={title}maxLine="2"ellipsis="..."trimRightbasedOn="letters"/></ItemTitle></a></LightgalleryItem></div>);

Props

LightgalleryProvider

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)
plugins	String[]	[ "lg-fullscreen.js", "lg-thumbnail.js", "lg-video.js", "lg-zoom.js" ]	no	List of enabled plugins

List of supported plugins

• lg-autoplay.js
• lg-fullscreen.js
• lg-hash.js
• lg-pager.js
• lg-thumbnail.js
• lg-video.js
• lg-zoom.js
• lg-share.j

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:

classAppextendsReact.Component{render(){return(<LightgalleryProvideronAfterSlide={(event,lightgallery_object)=>{console.log(lightgallery_object);console.log(`Prev slide index: ${event.detail.prevIndex}; Current index: ${event.detail.index}`);}}>
// your components
</LightgalleryProvider>);}}

LightgalleryItem

Prop	Type	Default	Required	Description
group	String	undefined	yes	Name of group of photos set
src	String	undefined	yes	Url to image
thumb	String	same as src👆	no	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

HOCs and Hooks

⚠️ Note!
You should to use this HOCs and hooks only inside of LightgalleryProvider

useLightgallery

React hook that returns openGallery function for opening of a group.

Example

importReact,{useCallback}from"react";import{useLightgallery}from"react-lightgallery";functionMySuperButton({ group_name }){const{ openGallery }=useLightgallery();constopen=useCallback(()=>{openGallery(group_name,5);// you must to define target group, index (second parameter) is optional},[group_name]);return<buttononClick={open}>Open gallery</button>;}

withLightgallery

React HOC for providing openGallery function.

Example

importReact,{useCallback}from"react";import{withLightgallery}from"react-lightgallery";
@withLightgalleryclassMySuperButton(){open=()=>{this.props.openGallery("very_cool_group")}render(){return<buttononClick={this.open}>Open gallery</button>;}}

TODO

• Rewrite to typescript
• Remove lightgallery.js and plugins imports and provide this job to user(developer) (new major version)
• Write tests
• Support of video
• Access to specific events through LightgalleryItem, like: onOpen, onLeave, onEnter
• More options from lightgallery for LightgalleryItem