react-stylish-gallery
v1.0.10
Published
Create responsive image galleries with easy to use React components
Downloads
34
Maintainers
Readme
Description
Create beautiful responsive image galleries with easy to use React components. Check out the demos page for more examples
Instalation
npm i -S react-stylish-gallery
or
yarn add react-stylish-gallery
Usage
import React from 'react'
import { Gallery, Image, Overlay } from 'react-stylish-gallery'
export default () => (
<Gallery withModal>
<Image
src='Your url'
alt="Image 1"
>
<Overlay title="My first image">
</Image>
<Image
src='Your url'
alt="Image 2"
>
<Overlay title="My second image">
</Image>
</Gallery>
)
API
Galley properties
Description: Wrap your Image components inside the Gallery. Use it only if you have 2 or more Image components.
| Prop Name | Type | Default | Requierd | Description | |-----------|---------|---------|----------|---------------------------------------------------------------------------------------------------------------| | withModal | boolean | false | false | Defines if the images have modal when. clicked | | infinite | boolean | false | false | Defines if the modal it's infinite (eg. after clicking 'next' on the last image, the first. image will appear) | | theme | object | {} | false | Applies style to the Modal component.
Theme object properties
Note: This object applies style only to the Modal component!
| Prop Name | Type | Default | Unit | Options | Description | |--------------------|--------|---------|------------|----------------------------------------------|--------------------------------------------| | animationEntrance | string | | | scaleUp | slideDown | slideRight | slideLeft | Sets the entrance animation of the modal. | | animationExit | string | | | scaleDown | slideDown | slideRight | | Sets the exit animation of the modal. | | animationTime | number | 0 | s(seconds) | | Sets the time of the animations. | | background | string | #000 | | | Sets the background of the modal. | | rightIconClassName | string | | | | Sets the className of the right side icon. | | leftIconClassName | string | | | | Sets the className of the left side icon. | | rightIconName | string | | | | Sets the name of right side icon. | | leftIconName | string | | | | Sets the name of the left side icon. |
Image properties
Description: This is the component which contains the actual image. Adjust the size to change the space occupied by the flex.
| Prop Name | Type | Default | Requierd | Definition | |-----------|--------|-----------|----------|----------------------------------------------| | src | string | | true | Points to the source of your image | | alt | string | | true | Alt in case image url is broke | | size | number | 4 | false | Size of the image in the row | | height | number | auto | false | Sets the height of the image | | pading | number | 0 | false | Sets the padding of the image | | theme | object | {} | true | Applies style to the Image component | | className | string | | false | Applies style to the Image component | | onClick |function| | false | Add custom function when clicking on the image |
Theme object options
| Prop Name | Type | Default | Unit | Description | |-----------|--------|---------|------|--------------------------------------------| | padding | number | 0 | rem | Set the total padding of the current image | | height | number | auto | px | Set the height of the current image |
Overlay properties
Description: Use to add an overlay over the Image component which can also display a text.
| Prop Name | Type | Default | Requierd | Description | |-----------|--------|-----------|----------|----------------------------------------| | title | string | | false | Displays a text over the overlay | | theme | object | {} | true | Applies style to the Overlay component |
Theme object options
| Prop Name | Type | Default | Unit | Options | Description | |-------------------------|--------|---------|------------|--------------------------------------------------------------------------|-----------------------------------------------------| | animationName | string | fadeIn | | fadeIn | slideDown | slideUp | slideLeft | slideRight | Defines the overlay animation | | animationDuration | number | 0.4 | s(seconds) | | Sets the duration of the animation | | animationTimingFunction | string | ease-in | | linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | Sets the animation timing function of the animation | | background | string | #000 | | | Sets the background of the overlay | | opacity | number | 0.5 | | | Sets the opacity of the background | | fontSize | number | 3 | rem | | Sets the font size of the title | | color | string | #fff | | | Sets the color of the title |
Copyright (c) 2017 Nichita-Alexandru Sindie