sky's Introduction

Sky

React component for interactive backgrounds

Demo

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

sky's People

Contributors

Stargazers

Watchers

sky's Issues

How to add Sky to div and get size to adapt to the divs?

Hello,

I really liked your react-sky, and wish to add it as an opening animation that may be seen.

However, the animation covers the entire screen (I only want it to be within the div enclosing it), and I cannot figure out how to constrain the objects to the limits of its container.

Also, the container (div) doesn't change size once I add the Sky component.

I have added the code I use below for reference.

const jumb1Styles = {
  padding: '30px',
  marginBottom: '30px',
  fontSize: '21px',
  fontWeight: '200',
  lineHeight: '2.1428571435',
  height: '50px',
  width: '50px'

}


<div> 
    
  <div style = {jumb1Styles}>
      <Sky
            images={{
              0: "../img/clip1.png",
              1: "../img/planet1.png"

            }}
            how={5} /* Pass the number of images Sky will render chosing randomly */
            time={40} /* time of animation */
            size={'100px'} /* size of the rendered images */
            background = {'gray'}
          />
      <h1> Hack to save lives. </h1>

  </div>


</div>

More details: I am using latest version of React.js
The code above was part of a class component (separate class component from App.js) (part of render method)

setTimeout calls not cleared on Item component unmount

Thanks for making this package - we are using it in a project and chrome dev tools is giving us memory leak warnings due to setTimeout calls that aren't being cleared when the component is unmounted.

I think the issue is in item.js, setTimeout calls are made on lines 16 and 42 such that there will always be some sort of timeout running, but this then isn't cleared via clearTimeout when the component is unmounted.

A fairly small thing I know, but an easy fix too :)

I am happy to fork and raise a PR for this if that would be useful?

Recommend Projects

lucagez / sky Goto Github PK