@herii/react-gallery

A Component to add a Gallery to your React Projet

This is a very simple but powerful react component that allows you to add a gallery with different cool features.

💫 DEMO 🚀 💫

You can see a demo here on codesandbox.io

🚀 Features

• Add blur to a specific image of the gallery
• Add a parallax effect
• Add Content to the gallery (On top of an image of your gallery)
• You get two arrows to control the selected image.
• The images are preloaded for a fast and smooth transition between each image in the gallery

💽 Installation

You can use npm or yarn to add our package to your project.

yarn add @herii/react-gallery

npm install @herii/react-gallery

And of course Dillinger itself is open source with a [public repository][dill] on GitHub.

💻 How to use

Import Gallery from our

import {Gallery} from '@herii/react-gallery'

Now you are ready to use our component inside your app:

<Gallery items={[{
                img: "https://cdn.pixabay.com/photo/2022/05/31/17/14/bird-7233900_1280.jpg",
                blur: true,
                children: <div className='flex-center'>
                    <div>
                    <h1>Birds are cool</h1>
                    <p style={{color: 'white'}}>So as this gallery component is</p>
                    </div>
                </div>
            }, 
            {
                img: "https://cdn.pixabay.com/photo/2016/11/23/18/27/hummingbird-1854225_1280.jpg",
                parallax: true,
            }]
        } type="default" />

Properties

The Component's properties are listed below.

type (string)

The type of transition effect that the gallery will run when moving from an image to another.

|value | description| |---|---| |default| The default transition moves the gallery from left to right /right to left| |fade-blur| fade in / fade out with a blurry effect|

width

The width of the container of the images (The images use 100% of the width of the container)

|type | default| |---|---| |string|'100vw'|

height

The height of the container of the images (The images use 100% of the height of the container)

|type | default| |---|---| |string|'100vh'|

disableControls

Don't like the arrows? You can hide them by setting this option to true.

|type | default| |---|---| |boolean|false|

loop

If you set this option to true then the gallery will move its items automatically.

|type | default| |---|---| |boolean|false|

interval

The interval at which the gallery will move its items (In milliseconds)

|type | default| |---|---| |int|5000|

Items

The only parameter you can pass right now is the items which is an array of objects

[
    {
        // Object #1
    },
    {
        // Object #2...
    }
]

Each Object can have the following properties:

| Property | Type(s) | Example | Default | Description | |---|---|---|---|---| | img | string | https://cdn.pixabay.com/photo/2022/05/31/17/14/bird-7233900_1280.jpg | null | The IMG URL or any object that can be passed to URL() in a background image: background-image: url(img) | | blur | boolean | true | false | Add a blur on top of the image | | parallax | boolean | true | false | Add a parallax effect to the image when scrolling the container | | children | JSX | <>This is a React Fragment</> | null | JSX that will be added on top of the image, by default you don't have styles here but you can add your own styles to the JSX elements to center the elements|

Example of an object with all properties

{
    img: "https://cdn.pixabay.com/photo/2022/05/31/17/14/bird-7233900_1280.jpg",
    blur: true,
    parallax: true,
    children: <>Hello</>
}

Support

I created this project it to use it in my own projects as a reusable component and I support it and update it as much as I require to.

If you find any issue/glitch/bug you can create an issue by clicking here and I'll review it and fix it as soon as possible.

If you want to support further development of this package / new features / etc, You can do it by donating me whathever amount you desire.