React Image Cycling Tool

A react tool used to cycle through an array of images using HTML5 Canvas.

Demo

Installation

With NPM:

run npm install react-image-cycling-tool.

With Github:

Download react_image_cycling_tool-0.1.0.tgz and run npm install <pwd>/react-image-cycling-tool-1.0.0.tgz).

Usage

This tool is used to cycle through an array of images given by the user.

Example

import './App.css';
import {ImageFader} from './components/ImageFader'

function App() {
  var images = ["imgURL1","imgURL2","imgURL3","imgURL4"]

  return (
    <ImageFader 
        background="white"
        images={images}
        width={window.innerWidth} 
        height={window.innerHeight}
        objectFit="natural"/>
  );
}

export default App;

Props

background prop: Background color of the component when an image is either transparent or not present. Default: white

images prop: A list of image urls to display and cycle through. The component with cycle through these images indefinitely. Default: ["https://upload.wikimedia.org/wikipedia/commons/0/0a/No-image-available.png"] (no images pic)

width prop: Width of the component, percentage of the window's width, less than or equal to 1. NOTE dependent on objectFit this may not be the size of the image Default: 1

height prop: Height of the component, percentage of the window's height, less than or equal to 1. NOTE dependent on objectFit this may not be the size of the image Default: 1

objectFit prop: ObjectFit determines how the image will fit the larger canvas object.

• stretch (default): this will stretch all images to fit the size of the component without cropping the image at all.
• natural: this will not manipulate the image at all, smaller images will sit within the center of the canvas and larger images will place the center of the image in the cavnas while cropping parts that extend out of it
• fit: this will crop the image to fit the ratios of the canvas component and either expand or shrink that image