Starfield

A classic Starfield Space animation effect rendered in a html canvas element. Can be used through a React Component or hook with a canvas reference.

The package is published on npm:

npm install starfield-react

yarn add starfield-react

2. Use the React Component StarField directly in your React app:

import { StarField } from 'starfield-react'
import { render } from 'react-dom'

render(<StarField/>, document.querySelector('body'))

The default prop values render a classic Starfield but can be tweaked as above and shown in /examples.

Documentation on the StarField Component props are on the Props interface type in src/StarField.tsx.

Or use the React Hook useStarField to have more control over the canvas reference:

import { useStarField } from 'starfield-react'

const StarFieldCustom = (props) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const stateReference = useRef<StarFieldState>(createStarsState({
    count,
    height,
    width,
  }))

  // The same hook used in the `StarField` component above:
  useStarField(canvasRef, options, stateReference)

  return <canvas
    ref={canvasRef}
    {...{ width, height }}
    {...restProps}
  />
}