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 file;
Add the provider to your a high-level component
// some Root.js file;; Component { 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; const PhotoItem = <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>;
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:
Component { return <LightgalleryProvider onAfterSlide= { console; console; } > // 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 ofLightgalleryProvider
useLightgallery
React hook that returns openGallery
function for opening of a group.
Example
;; { const openGallery = ; const open = ; return <button onClick=open>Open gallery</button>;}
withLightgallery
React HOC for providing openGallery
function.
Example
;; @withLightgallery { thisprops } { return <button onClick=thisopen>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