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

    Install

    npm i starfield-react

    DownloadsWeekly Downloads

    5

    Version

    3.1.0-dev-5

    License

    MIT

    Unpacked Size

    83 kB

    Total Files

    21

    Last publish

    Collaborators

    • impaler