retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 907 B
JavaScript
import{useRef as t,useEffect as e}from"react";import{jsx as i}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";const r=r=>{let{numStars:n=100,speed:o=1,size:l=2,starColor:h="white",style:a}=r;const s=t(null);return e((()=>{const t=s.current;if(!t)return;const e=t.getContext("2d");if(!e)return;t.width=t.clientWidth,t.height=t.clientHeight;const i=Array.from({length:n},(()=>({x:Math.random()*t.width,y:Math.random()*t.height,velocity:(Math.random()+.5)*o})));let r;const a=()=>{e.fillStyle="black",e.fillRect(0,0,t.width,t.height),i.forEach((i=>{e.fillStyle=h,e.fillRect(i.x,i.y,l,l),i.y+=i.velocity,i.y>t.height&&(i.y=0,i.x=Math.random()*t.width)})),r=requestAnimationFrame(a)};return a(),()=>{cancelAnimationFrame(r)}}),[s,n,o,l,h]),i("canvas",{ref:s,style:Object.assign({width:"100%",height:"100%"},a)},void 0)};r.displayName="StarField";export{r as StarField};