CoverFlow Widget Written in ReactJS

CoverFlow Widget Written in ReactJS

Coverflow React There is a coverflow-react-demo repository on GitHub, that demonstrates features of this widget.

Coverflow React

npm install --save coverflow-react

Live Demo

https://storage.googleapis.com/coverflow-react/index.html

Demo project

There is a coverflow-react-demo repository on GitHub, that demonstrates features of this widget.

Screenshots

screenshot horizontal screenshot vertical

Usage

Using CoverFlow in your project

  1. Add coverflow-react package to your project using npm.
npm install --save coverflow-react
  1. import CoverFlow
import CoverFlow from 'coverflow-react';
  1. Create an array of path/URLs to the images.
const imagesArr = [
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg'
    ];

(If you are using create-react-app, you can put the images in 'public' directory).

  1. Add CoverFlow Component to your project and pass images array.
<CoverFlow imagesArr={imagesArr} />

Optional props

  • zIndex - by default it is 100. If there are conflicts with z-index in your project. You can pass zIndex you want.
  • height - the height of coverflow container in pixels. The default is 300. The height of coverflow item is calculated automatically. It is 60px less than the height of the container.
  • emptyMessage - a message the user see when there are no items. The default message is 'No items to show.'. This property allows to customize this message. It is particularly useful for internationalization and localization, by allowing coverflow to adapt to different languages.
  • itemRatio - aspect ratio of coverflow items. The default is '8:5'.
  • background - a css background property. The default is 'lightgray'. You can assign any valid css background.
  • border - a css border property. The default is 'none'. You can assign any valid css border.
  • boxShadow - a css box-shadow property. The default is 'none'. You can assign any valid css box-shadow.
  • handleSelect - you can pass a callback function. The function has an index parameter.
<CoverFlow handleSelect={(index)=>{alert(index);}} imagesArr={imagesArr} />
  • labelsArr - allows to add text labels at the bottom of the images, the array must be the same size of imagesArr.
  • direction - the default is "horizontal", if passing "vertical", the CoverFlow will transform to vertical.

Features

  • Support for large amount of images, by rendering only some of them at a time, and with easy navigation and smooth animation, the user can see all the images.
  • Vertical CoverFlow (In addition to Horizontal CoverFlow).

Multiple input devices support

  • Swipe support on touch devices (smartphones, tablets).
  • Keyboard 'left' and 'right' keys support.
  • Scroll support (mouse and trackpad).

Contributing

Opening issues and code contributions are welcomed. See contributing guide.

Credits for images in the demo

Uncopyrited images from Pixabay and Pexels.

Download Details:

Author: leon-good-life

Demo: https://storage.googleapis.com/coverflow-react/index.html

Source Code: https://github.com/leon-good-life/coverflow-react

reactjs react javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What is ReactJS? | ReactJS Basics | Learn ReactJS | React for Beginners | ReactJS Training

This Edureka video on "What is ReactJS ?" will help you understand the fundamentals of ReactJS and help you in building a strong foundation in React by understanding the advantages of ReactJS along with its features and major aspects.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.