https://github.com/impaler/starfield-react

A react component that draws a starfield on a canvas element.
https://github.com/impaler/starfield-react

canvas-element component draw react starfield

Last synced: about 2 months ago
JSON representation

A react component that draws a starfield on a canvas element.

• Host: GitHub
• URL: https://github.com/impaler/starfield-react
• Owner: impaler
• License: mit
• Created: 2017-01-03T02:26:02.000Z (about 8 years ago)
• Default Branch: develop
• Last Pushed: 2019-10-11T01:44:40.000Z (about 5 years ago)
• Last Synced: 2024-01-13T07:07:34.431Z (12 months ago)
• Topics: canvas-element, component, draw, react, starfield
• Language: TypeScript
• Size: 5.21 MB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Starfield

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

![](https://github.com/impaler/starfield-react/blob/develop/example/images/defaults.gif?raw=true)

See a live editable demo here:

[![Edit starfield-react example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/musing-lamarr-84is6?fontsize=14)

Install from npm:

    `npm install starfield-react`

    `yarn add starfield-react`

2) Use the React Component `StarField` directly in your React app:

```js

import { StarField } from 'starfield-react'

import { render } from 'react-dom'

render(, document.querySelector('body'))

```

Or use the React Hook `useStarField` to have more control:

```js

import { useStarField } from 'starfield-react'

const StarFieldCustom = (props) => {

  const canvasRef = useRef(null)

  const stateReference = useRef(createStarsState({

    count,

    height,

    width,

  }))

  // The same hook used in the `StarField` component above:

  useStarField(canvasRef, options, stateReference)

  return 

}

``` 

Documentation on the StarField Component props are on the Props `interface` type in [`src/StarField.tsx`](https://github.com/impaler/starfield-react/blob/develop/src/StarField.tsx#L6).

Examples of different props in action:

![](https://github.com/impaler/starfield-react/blob/develop/example/images/colors.gif?raw=true)

![](https://github.com/impaler/starfield-react/blob/develop/example/images/colors-square.gif?raw=true)

![](https://github.com/impaler/starfield-react/blob/develop/example/images/green-warp.gif?raw=true)

![](https://github.com/impaler/starfield-react/blob/develop/example/images/high-count.gif?raw=true)