@tluper94/react-gallery

@tluper94/React-gallery v1.0.27

React gallery is a simple gallery/carousel component for react

Check out the demo - Codesandbox demo

Installation

Using npm

$ npm i @tluper94/react-gallery

Usage

import Gallery from '@tluper94/react-gallery';

Gallery Items

Gallery items are children of the gallery component

Example:

<Gallery
    width='500px'
    height='500px'
>
    <img/>
    <video/>
    <div>Example</div>
</Gallery>

Width & Height

Width and height are required and accepts type 'string'

Example:

<Gallery
    width='100px'
    heith='100px'
>
</Gallery>

Controls

Controls prop is optional and accepts a type object {color: 'string', size: 'string', weight: 'string}

-color - can be any css color

-size - can be any css size

-weight - 'thin', 'light', 'regular', 'bold', 'fill', 'duotone'

Example:

<Gallery
    width='20vh'
    height='20vh'
    controls={color: '#fff', size: '2vw', weight: 'fill'}
>
<Gallery>

Dots

Dots prop is optional and accepts a type object {color: 'string', size: 'string', inside: boolean}

-color - can be any css color

-size - can be any css size

-inside - true -- if true dots are on the inside of container else on the outside

Example:

<Gallery
    width='100%'
    height='100%'
    dots={color: 'black', size: '20px' inside: true}
>
</Gallery>