react-big-bang-star-field

✨ Canvas-based Big Bang Star Field animation for React.

Install

npm install --save react-big-bang-star-field

Usage

Check out the demo.

Demo includes background image div

import React, { Component } from 'react'

import BigBangStarField from 'react-big-bang-star-field'

class Example extends Component {
  render () {
    return (
      <BigBangStarField
        numStars={666}
        maxStarSpeed={1}
        scale={4}
        style={{
            position: 'absolute',
            width: '100%',
            height: '100%'
          }}
        starColor={"217, 160, 244"}
      />
    )
  }
}

Props

| Property | Type | Default | Description | |:----------------|------------------|:-------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------| | numStars | number | 333 | Number of stars to use. | | maxStarSpeed | number | 1 | Maximum star speed. | | scale | number | 4.0 | Scaling factor for canvas | | size | number | width: x, height: y | Size (determined by sizeMe) | | starColor | string | 217, 160, 244 | RGB color of stars produced | | style | style | | Style attributes applied to root canvas element | | ... | ... | undefined | Any other props are applied to the root canvas element. |

Related

• zembrzuski js starfield - Canvas based js starfield codepen
• react-particle-animation - Canvas-based particle animation for React, that also uses sizeMe
• react-starfield-animation - Canvas-based starfield particle animation for React.

License

MIT © chrisjosephs

Background stars image in example from piqsels released under public domain license

This module was bootstrapped with create-react-library.