https://github.com/vlzh/react-lightgallery
React wrapper for lightgallery.js
https://github.com/vlzh/react-lightgallery
gallery lightgallery react ui-components
Last synced: 10 months ago
JSON representation
React wrapper for lightgallery.js
- Host: GitHub
- URL: https://github.com/vlzh/react-lightgallery
- Owner: VLZH
- License: mit
- Created: 2019-03-05T23:06:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:41:56.000Z (over 3 years ago)
- Last Synced: 2025-09-06T04:48:52.263Z (10 months ago)
- Topics: gallery, lightgallery, react, ui-components
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-lightgallery
- Size: 815 KB
- Stars: 63
- Watchers: 4
- Forks: 16
- Open Issues: 21
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# About
This package is react wrapper for: [lightgallery.js](https://sachinchoolur.github.io/lightgallery.js)
  
# Installation
```bash
yarn add react-lightgallery
```
or
```bash
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
[](https://codesandbox.io/s/mo45kpo92j?fontsize=14)
# Usage
Import `.css` file in your code:
```javascript
// some Root.js file
import "lightgallery.js/dist/css/lightgallery.css";
```
Add the **provider** to your a high-level component
```javascript
// some Root.js file
import React from "react";
import { LightgalleryProvider } from "react-lightgallery";
class App extends React.Component {
render() {
return (
// 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 ``
```javascript
// some PhotoItem.js file
import { LightgalleryItem } from "react-lightgallery";
const PhotoItem = ({ image, url, title }) => (
);
```
# Props
## LightgalleryProvider
| Prop | Type | Default | Required | Description |
| --------------------- | -------- | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| lightgallerySettings | Object | {} | no | Setting for lightgallery. [More information](https://sachinchoolur.github.io/lightgallery.js/docs/api.html#options) |
| 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:
```javascript
class App extends React.Component {
render() {
return (
{
console.log(lightgallery_object);
console.log(
`Prev slide index: ${event.detail.prevIndex}; Current index: ${event.detail.index}`
);
}}
>
// your components
);
}
}
```
## 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
```javascript
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 Open gallery;
}
```
## withLightgallery
React HOC for providing `openGallery` function.
### Example
```javascript
import React, { useCallback } from "react";
import { withLightgallery } from "react-lightgallery";
@withLightgallery
class MySuperButton(){
open = () => {
this.props.openGallery("very_cool_group")
}
render() {
return Open gallery;
}
}
```
# 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