react-starfield-animation

Canvas-based starfield animation for React.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-starfield-animation
8961.0.14 years ago4 years agoMinified + gzip package size for react-starfield-animation in KB

Readme

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.