About

This package is react wrapper for: lightgallery.js

Installation

yarn add react-lightgallery

or

npm install --save react-lightgallery

Run example

git clone [email protected]: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
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>
);

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:

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>
        );
    }
}

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

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>;
}

withLightgallery

React HOC for providing openGallery function.

Example

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>;
    }
}

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