🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

sky is a React component to generate interactive backgrounds for your apps.

Animation React

Documentation

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


You May Also Like