This package is react wrapper for: lightgallery.js
yarn add react-lightgalleryor
npm install --save react-lightgallerygit 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 
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 ( <LightgalleryProvider lightgallerySettings={ { // 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 file import { LightgalleryItem } from "react-lightgallery"; const PhotoItem = ({ image, url, title }) => ( <div> <LightgalleryItem group="any" src={image}> <a href={url}> <img src={image} /> <ItemTitle> <LinesEllipsis text={title} maxLine="2" ellipsis="..." trimRight basedOn="letters" /> </ItemTitle> </a> </LightgalleryItem> </div> );| 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 |
- lg-autoplay.js
- lg-fullscreen.js
- lg-hash.js
- lg-pager.js
- lg-thumbnail.js
- lg-video.js
- lg-zoom.js
- lg-share.j
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 ( <LightgalleryProvider onAfterSlide={(event, lightgallery_object) => { console.log(lightgallery_object); console.log( `Prev slide index: ${event.detail.prevIndex}; Current index: ${event.detail.index}` ); }} > // your components </LightgalleryProvider> ); } }| 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 |
⚠️ Note!
You should to use this HOCs and hooks only inside ofLightgalleryProvider
React hook that returns openGallery function for opening of a group.
import React, { useCallback } from "react"; import { useLightgallery } from "react-lightgallery"; function MySuperButton({ group_name }) { const { openGallery } = useLightgallery(); const open = useCallback(() => { openGallery(group_name, 5); // you must to define target group, index (second parameter) is optional }, [group_name]); return <button onClick={open}>Open gallery</button>; }React HOC for providing openGallery function.
import React, { useCallback } from "react"; import { withLightgallery } from "react-lightgallery"; @withLightgallery class MySuperButton(){ open = () => { this.props.openGallery("very_cool_group") } render() { return <button onClick={this.open}>Open gallery</button>; } }- 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