Skip to content

Latest commit

 

History

History
188 lines (123 loc) · 3.87 KB

gallery.md

File metadata and controls

188 lines (123 loc) · 3.87 KB

Gallery

Source

An image gallery that displays up to four images by default. Also supports reordering and deletion of images and blurred image previews for images loaded from tsimg.cloud.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { Gallery } from 'chayns-components';

// ...

<Gallery {...} />

Props

The Gallery-component takes the following props:

Name Type Default Required
images custom
onClick function
onDelete function
deleteMode boolean false
height number | string
width number | string
className string
style { [key: string]: string | number } {}
stopPropagation boolean false
dragMode boolean false
onDragEnd function
preventParams boolean false
smallTiles boolean false

images

images?: custom

An array of strings or File objects that will be the image sources.

onClick

onClick?: function

A function that is called when an Image is clicked.

onDelete

onDelete?: function

A function that is called when an image is deleted in deletion mode.

deleteMode

deleteMode?: boolean

Wether the deletion mode is active.

height

height?: number | string

The height of the gallery as a number of pixels or CSS string.

width

width?: number | string

The width of the gallery as a number of pixels or CSS string.

className

className?: string

A classname string that will be applied to the root container.

style

style?: { [key: string]: string | number }

A React style object that is applied to the root container.

stopPropagation

stopPropagation?: boolean

Wether to stop propagation of click events to parent elements.

dragMode

dragMode?: boolean

Wether drag mode is active.

onDragEnd

onDragEnd?: function

Called after the user finished reordering the array. Receives the new array as its first parameter.

preventParams

preventParams?: boolean

This will be forwarded to the Image-component. It prevents parameters of the loaded image. E.g. supply { width: true } to prevent the width-parameter on the loaded image.

smallTiles

smallTiles?: boolean

This option changes the layout to the layout known from delete- and drag-mode without activating this modes.