Popularity
1.5
Growing
Activity
0.0
-
33
4
9

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Components     Photo / Image     UI     React     Component    

react-lightgallery alternatives and similar libraries

Based on the "Photo / Image" category.
Alternatively, view react-lightgallery alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-lightgallery or a related project?

Add another 'Photo / Image' Library

README

About

This package is react wrapper for: lightgallery.js

npm GitHub issues npm bundle size

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

Edit react-lightgallery1

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