Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
gif
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

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

About

sky component for React

Resources

License

Releases

No releases published

Packages

No packages published