Canvas-based starfield animation for React.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
package.json
readme.md
rollup.config.js
yarn.lock

readme.md

react-starfield-animation (demo)

Canvas-based starfield animation for React.

NPM Build Status JavaScript Style Guide

Demo

Install

npm install --save react-starfield-animation

Usage

Check out the demo.

import React, { Component } from 'react'

import StarfieldAnimation from 'react-starfield-animation'

class Example extends Component {
  render () {
    return (
      <StarfieldAnimation
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%'
        }}
      />
    )
  }
}

Props

Property Type Default Description
numParticles number 300 Number of particles (stars) to use.
lineWidth number 2.0 Line width affecting particle size.
alphaFactor number 1.0 Scaling factor for particle opacity.
depth number 300 Scaling factor for particle depth.
... ... undefined Any other props are applied to the root canvas element.

Note that the canvas size will automatically be inferred based on available space via react-sizeme, so it should be really easy to use this component as a fullscreen background as in the demo.

Related

License

MIT © Travis Fischer

This module was bootstrapped with create-react-library.