About

This package is wrapper for: lightgallery.js

Instalation

yarn add react-cart-lightgallery

or

npm install --save react-cart-lightgallery

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
const PhotoItem = ({ image, url, title }) => (
    <Item>
        <LightgalleryItem group="any" src={image}>
            <Link href={url}>
                <Image src={image} />
                <ItemTitle>
                    <LinesEllipsis
                        text={title}
                        maxLine="2"
                        ellipsis="..."
                        trimRight
                        basedOn="letters"
                    />
                </ItemTitle>
            </Link>
        </LightgalleryItem>
    </Item>
);

Props

LightgalleryProvider

| Prop | Type | Default | Required | Description | | --------------------- | ------ | ---------------------------- | -------- | ------------------------------------------------------------------------ | | lightgallerySettings | Object | {} | no | Setting for lightgallery | | 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) |

LightgalleryItem

| Prop | Type | Default | Required | Description | | ------------- | ------ | ------------------------- | -------- | --------------------------------------------------------------- | | group | String | undefined | yes | Name of group of photos set | | src | String | undefined | yes | 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 |