• Stars
    star
    377
  • Rank 110,020 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

sky component for React

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