starfield-react

Starfield

A retro Star Field Space effect in a html canvas element through a React Component and or Hook.

See a live editable demo here:

Install from 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'))

Or use the React Hook useStarField to have more control:

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}
  />
}

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

Examples of different props in action: