starry-sky

a React wrapper component that renders a background of a night sky with stars animated to blink and fall.

basic usage

• install as a dependency - npm i @fazeelanizam13/starry-sky

• follow the example for a minimal version of the background:

import StarrySky from '@fazeelanizam13/starry-sky'

const App = () => {
  return (
    ...

    <StarrySky size={{ width: 60, height: 70 }} />

    ...
  )
}

props

| name | type | default | example | description | | -------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------------- | | size | { width: number; height: number } | - | { width: 60, height: 70 } | height and width of the background as a percentage relative to parent. | | starSize | { min: number; max: number } | { min: 1, max: 4 } | - | diameter of a star in pixels | | starMargin | { min: number; max: number } | { min: 40, max: 60 } | - | margin between two stars in pixels. | | noOfShootingStars | number | 10 | - | the number of stars that will have a shooting animation. | | periodBetweenShootingStars | { min: number; max: number } | { min: 5, max: 10 } | - | seconds to wait between each falling star. | | shootingAnimationDuration | number | 2 | - | duration for the falling animation common to every falling star. | | style | React.CSSProperties | { background: 'linear-gradient(145deg, #18060b 20%, #201718 43%, #251f20 51%, #291e1f 72%, #18060b 90%)', } | - | style applied to the background of the component. |

for developers

to setup locally:

• install dependencies - npm install
• start dev server - npm run start

to test the package:

• build the package - npm run build
• compress the package - npm pack
• reference the generated .tgz file from the package.json of the project you want to test from

"dependencies": {
  "@fazeelanizam13/starry-sky": "<path/to/file.tgz>"
}

• run npm install
• import and use as shown in the example:

import StarrySky from '@fazeelanizam13/starry-sky'

const App = () => {
  return (
    ...

    <StarrySky size={{ width: 60, height: 70 }} />

    ...
  )
}