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` - Use the React Component
StarFielddirectly 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:
