Sky
React component for interactive backgrounds
Demo
https://codepen.io/lucagez/full/oQoRyK/
Installation
$ npm install --save react-sky
Usage
import React, { Component } from 'react';
import Sky from 'react-sky';
// you can pass imported images to Sky
import myImage from "./media/myImage.png"
class App extends Component {
render() {
return (
<div>
/* Sky adapts size to its container */
<Sky
images={{
/* FORMAT AS FOLLOWS */
0: "https://linkToYourImage0", /* You can pass as many images as you want */
1: "https://linkToYourImage1",
2: myImage /* you can pass images in any form: link, imported via webpack... */
/* 3: your other image... */
/* 4: your other image... */
/* 5: your other image... */
/* ... */
}}
how={130} /* Pass the number of images Sky will render chosing randomly */
time={40} /* time of animation */
size={'100px'} /* size of the rendered images */
background={'palettedvioletred'} /* color of background */
/>
</div>
);
}
}
export default App;
Props
images
Type: Object. Required
NOTE: Only one object is allowed to be passed.
how
Type: Number. Required
Number of images you want to display
time
Type: Number. Default: 20
Number of seconds of every single animation
size
Type: String. Default: 150px
Dimension of the images
background
Type: String. Default: none
Color of the background
License
MIT