@fazeelanizam13/starry-sky NPM

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

    ...
  )
}

@everything-registry/sub-chunk-316

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago