react-easy-image v1.0.10
React Easy Image
React Easy Image is a React componenet library to assist in creating interactive/responsive good looking images for your webpage.
React Easy Image has 4 components to choose from with more to be added in the near future. The components are:
1. Stack
2. Tile
3. SimpleSlides
All components must be passed a userConfig prop which must be an object with some required values and other optional ones. Each component's configs are broken down in their relevant documentation.
Installation and Setup
React Easy image can be installed via NPM with the following command.
npm install react-easy-image
Once installed import the R-E-I component you would to use "Stack, Tile, AnimatedSlides, SimpleSlides" into your desired React component.
import {name of component} from 'react-easy-image'
please see the relevant information on how to correctly utilise R-E-I components.
Example: Example:
import React from "react";
import ReactDOM from "react-dom";
import { Stack, Tile, SimpleSlides, AnimatedSlides } from "react-easy-image";
import card from "./10h.png";
const App = () => {
return (
<div>
<Stack images={YOUR_IMAGES} userConfig={YOUR_CONFIG} />
<Tile userConfig={YOUR_CONFIG}>
<img src={card} />
</Tile>
<SimpleSlides images={YOUR_IMAGES} userConfig={YOUR_CONFIG} />
<AnimatedSlides images={YOUR_IMAGES} userConfig={YOUR_CONFIG} />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
GitHub Repo for images
Stack
The Stack Component must be passed 2 properties:
1. images 2. userConfig
<Stack images={stackImages} userConfig={yourConfigSettings} />
Images
Images must be an array of required images via webpack
const importAll = (r) => {
return r.keys().map(r);
};
let stackImages = importAll(
require.context("path-to-imgs-folder", true, /\.(png|jpe?g|svg)$/)
);
or
const stackImages = [
require("./imgs/stackImgs/image1.jpg"),
require("./imgs/stackImgs/image2.jpg"),
require("./imgs/stackImgs/image3.jpg"),
require("./imgs/stackImgs/image4.jpg"),
require("./imgs/stackImgs/image5.jpg"),
];
const stackImages = [
require("path-to-your-img.png"),
require("path-to-your-img.png"),
require("path-to-your-img.png"),
require("path-to-your-img.png"),
];
Or
// Images can also be imported manually
import image1 from "yourpath/image1.png";
import image2 from "yourpath/image2.png";
import image3 from "yourpath/image3.png";
import image4 from "yourpath/image4.png";
import image5 from "yourpath/image5.png";
const stackImages = [image1, image2, image3, image4, image5];
Config
Stack's config options are as follows:
Key | Type | Property is required | Default Values |
---|---|---|---|
imgWidth | string | yes | N/A |
imgHeight | string | yes | N/A |
containerHeight | string | no | imgWidth + 150px |
containerWidth | string | no | imgHeight + 150px |
shadowColor | string | no | "rgba(0,0,0, 0.05)" |
shadowHoverColor | string | no | "rgba(0,0,0, 0.25) |
border | string | no | "none" |
allowDots | boolean | no | true |
dotHighlightColor | string | no | ""violet |
dotBgColor | string | no | "#777" |
allowChevrons | boolean | no | false |
chevronStyle | number | no | 1 |
chevronColor | string | no | "black" |
if no conatinerHeight and containerWidth values are passed they will be calclated with the imgWidth and imgHeight + 150px
Eample:
const stackConfig = {
imgWidth: "250px",
imgHeight: "400px",
containerWidth: "470px",
containerHeight: "600px",
dotBgColor: "#888",
dotHighlightColor: "violet",
shadowColor: "rgba(100, 100, 100, 0.05)",
allowDots: false,
allowChevrons: false,
};
GitHub Repo for images
By default clicking on the top image will cycle through the images. Clicking on the final image will reset the stack. Chevrons can enabled with the allowChevrons config property being set to true.
Tile
For the Tile component it is imperative you only wrap a single element that element can have child elements within its container but the tile effects will only work on a single outer element
E.G
<Tile userConfig={yourConfigSettings}>
<img src={yourImg} alt="" />
</Tile>
Tile's config must be passed with width and height values passed as a string. These values can be any CSS value E.G. "PX, EM, REM, CM, MM, %, etc"
Tile's config options are as follows:
Key | Type | Property is required | Defaults |
---|---|---|---|
width | string | yes | N/A |
height | string | yes | N/A |
shadowColor | string | no | "rgba(0,0,0, 0.7)" |
maxShadowBlur | number | no | 64 |
scale | number | no | 1.1 |
traction | number | no | 17 |
GitHub Repo for images
SimpleSlides
After importing react easy img render the SimpleSlides component in your JSX the SimpleSlides Component must be passed 2 properties:
1. images 2. userConfig
<SimpleSlides images={yourImagesArray} userConfig={yourSimpleSlidesConfig} />
Images
Due to having the option to have captions for these images the import method must differ slightly to that of Stack The images passed as a prop to SimpleSlides must be an Array of objects with the following key value pairs:
const simpleslidesArray = [
{ img: require("path-to-your-img.png"), cap: "Image 1 Caption" },
{ img: require("path-to-your-img.png"), cap: "Image 1 Caption" },
{ img: require("path-to-your-img.png"), cap: "Image 1 Caption" },
{ img: require("path-to-your-img.png"), cap: "" },
];
// Images can also be imported manually
import image1 from "yourpath/image1.png";
import image2 from "yourpath/image2.png";
import image3 from "yourpath/image3.png";
import image4 from "yourpath/image4.png";
import image5 from "yourpath/image5.png";
const simpleSlidesArray = [image1, image2, image3, image4, image5];
If no caption is required just pass an empty string.
Config
Simple Slides config must be passed with imgWidth, imgHeight, containerWidth and containerHeight values passed as strings. These values can be any CSS value E.G. "PX, EM, REM, CM, MM, %, etc"
Simple Slides config options are as follows:
Key | Type | Property is required | Defaults |
---|---|---|---|
imgWidth | string | yes | N/A |
imgHeight | string | yes | N/A |
containerWidth | string | yes | N/A |
containerHeight | string | yes | N/A |
maxShadowBlur | number | no | 64 |
shadowColor | string | no | "rgba(0,0,0, 0.09)" |
capFontSize | string | no | "14px" |
capColor | string | no | "#333" |
capBgColor | string | no | "rgba(220,220,220, 0.89)" |
chevronStyle | number | no | 2 |
chevronScale | number | no | 1 |
chevronColor | string | no | "black" |
allowDots | boolean | no | true |
dotHighlightColor | string | no | "violet" |
dotBgColor | string | no | "#888" |
borderRadius | string | no | "5px" |
Eample:
const tileConfig = {
containerWidth: "960px",
containerHeight: "730px",
imgWidth: "960px",
imgHeight: "640px",
capFontSize: "20px",
chevronStyle: 2,
chevronScale: 1.6,
chevronColor: "whitesmoke",
borderRadius: "10px",
};
GitHub Repo for images
AnimtedSlides
After importing react easy img render the AnimatedSlides component in your JSX the AnimatedSlides Component must be passed 2 properties:
1. images 2. userConfig
<AnimatedSlides images={yourImagesArray} userConfig={yourSimpleSlidesConfig4} />
Images
Due to having the option to have captions for these images the import method must differ slightly to that of Stack The images passed as a prop to SimpleSlides must be an Array of objects with the following key value pairs:
const animatedSlidesArray = [
{ img: require("path-to-your-img.png"), cap: "Image 1 Caption" },
{ img: require("path-to-your-img.png"), cap: "Image 2 Caption" },
{ img: require("path-to-your-img.png"), cap: "Image 3 Caption" },
{ img: require("path-to-your-img.png"), cap: "Image 4 Caption" },
{ img: require("path-to-your-img.png"), cap: "Image 5 Caption" },
];
// Images can also be imported normally
import image1 from "yourpath/image1.png";
import image2 from "yourpath/image2.png";
import image3 from "yourpath/image3.png";
import image4 from "yourpath/image4.png";
import image5 from "yourpath/image5.png";
const animatedSlidesArray = [
{ img: image1, cap: "image 1 caption" },
{ img: image2, cap: "image 2 caption" },
{ img: image3, cap: "image 3 caption" },
{ img: image4, cap: "image 4 caption" },
{ img: image5, cap: "image 5 caption" },
];
If no caption is required just pass an empty string - cap: ""
Config
AnimatedSlide's config options are as follow:
Key | Type | Property is required | Defaults |
---|---|---|---|
imgWidth | string | yes | N/A |
imgHeight | string | yes | N/A |
allowDots | boolean | no | true |
dotHighlightColor | string | no | "violet" |
dotBgColor | string | no | "#777" |
maxShadowBlur | number | no | 64 |
shadowColor | string | no | "rgba(0,0,0, 0.19)" |
roateTime | number | no | 350 (in ms) |
roateTime | string | no | "5px" |
capColor | string | no | "#333" |
capBgColor | string | no | "rgba(220,220,220, 0.89)" |
capFontSize | string | no | "14px" |
Example:
const aniSlidesConfig = {
imgWidth: "2000ppx",
imgHeight: "1250px",
dotBgColor: "slategray",
dotHighlightColor: "slateblue",
};
Animated Slides container width is set 100% if you want the container width smaller wrap it inside so it takes 100% of its parent.
Animated Slides images are positioned absolutly and the 3 image elements change position on rotation this is to limit re-renders of the images to only one per rotation.
Animted slides is also fully responsive and the images are scaled based on their aspect ratio to fit the viewport size.
GitHub Repo for images
Chevron Styles
See GitHub Repo for chevron styles and other images.