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.