React-big-bang-star-field NPM

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.

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.