starfield-react
TypeScript icon, indicating that this package has built-in type declarations

3.1.0-dev-5 • Public • Published

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

Package Sidebar

Install

npm i starfield-react

Weekly Downloads

98

Version

3.1.0-dev-5

License

MIT

Unpacked Size

83 kB

Total Files

21

Last publish

Collaborators

  • impaler