Skip to content

transitive-bullshit/react-starfield-animation

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

Support my OSS work by following me on twitter twitter