starfield-react/dist/starfield-react.module.js

A React component that draws an animated Starfield on a canvas dom element.

import t,{useEffect as e,useRef as n,useState as i}from"react";function r(t){let e=t.width,n=t.height,i=Math.round(e/2),r=Math.round(n/2),h=(e+n)/2;return{stars:o(i,r,h,e,n,t.count),width:e,height:n,x:i,y:r,z:h}}function o(t,e,n,i,r,o){let h=[];for(let s=0;s<o;s++)h.push({x:Math.random()*i*2-2*t,y:Math.random()*r*2-2*e,z:Math.round(Math.random()*n),stepX:0,stepY:0});return h}function h(t,n,i){const o=(null==i?void 0:i.current)||r({count:n.count,height:n.height,width:n.width});if(n.count!==o.stars.length)if(o.stars.length<n.count){const{stars:t}=r({count:n.count-o.stars.length,height:n.height,width:n.width});o.stars=[...o.stars,...t]}else o.stars.splice(0,o.stars.length-n.count);if(n.width!==o.width||n.height!==o.height){const{stars:t}=r({count:n.count,height:n.height,width:n.width});o.stars=t,o.width=n.width,o.height=n.height,o.x=Math.round(n.width/2),o.y=Math.round(n.height/2),o.z=(n.width+n.height)/2}e(()=>{if(!t.current)return;const e=t.current.getContext("2d");if(!e)return;const i=1/o.z,{speed:r,starRatio:h,starSize:s}=n;"string"==typeof n.starStyle&&(e.strokeStyle=n.starStyle),e.lineCap=n.starShape;const a=1e3/n.fps;let c,d,l,u=Date.now();return c=requestAnimationFrame(function t(){e&&(c=requestAnimationFrame(t),d=Date.now(),l=d-u,l<a||(u=d-l%a,function({context:t,stars:e,width:n,height:i,z:r,x:o,y:h,starLineWidthRatio:s,speed:a,starRatio:c,starSize:d,strokeStyle:l,bgStyle:u,clear:g,noBackground:w}){g&&(t.clearRect(0,0,n,i),w||(t.fillStyle=u,t.fillRect(0,0,n,i)));let f=!1;for(let u=0;u<e.length;u++){"function"==typeof l&&(t.strokeStyle=l());let g=e[u],w=g.stepX,p=g.stepY;f=!0,g.z-=a,g.z>r&&(g.z-=r,f=!1),g.z<0&&(g.z+=r,f=!1),g.stepX=o+g.x/g.z*c,g.stepY=h+g.y/g.z*c,f=f&&w>0&&w<n&&p>0&&p<i,f&&(t.beginPath(),t.lineWidth=(1-s*g.z)*d,t.moveTo(w,p),t.lineTo(g.stepX,g.stepY),t.stroke(),t.closePath())}}({context:e,speed:r,starRatio:h,starSize:s,starLineWidthRatio:i,strokeStyle:n.starStyle,bgStyle:n.bgStyle,noBackground:n.noBackground,clear:n.clear,...o})))}),()=>cancelAnimationFrame(c)},[n])}const s=({width:e=300,height:i=300,starStyle:o="#fff",bgStyle:s="#000",count:a=3e3,speed:c=3,starRatio:d=356,starSize:l=1.4,starShape:u="round",clear:g=!0,noBackground:w=!1,fps:f=10,...p})=>{const y=n(null);return h(y,{width:e,height:i,starStyle:o,bgStyle:s,count:a,fps:f,speed:c,starRatio:d,starShape:u,starSize:l,clear:g,noBackground:w},n(r({count:a,height:i,width:e}))),t.createElement("canvas",Object.assign({ref:y},{width:e,height:i},p))};function a(){let[t,n]=i(c());function r(){n(c())}return e(()=>(window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}),[]),t}function c(){return{innerHeight:window.innerHeight,innerWidth:window.innerWidth,outerHeight:window.outerHeight,outerWidth:window.outerWidth}}const d={position:"fixed",zIndex:-1},l=({style:e,...n})=>{const{innerWidth:i,innerHeight:r}=a();return t.createElement(s,Object.assign({},n,{style:{...d,...e},width:i,height:r}))};function u(){return`#${Array.apply(null,new Array(6)).map(()=>"0123456789ABCDEF"[Math.floor(16*Math.random())]).join("")}`}export{s as StarField,l as WindowSizeStarField,u as randomColor,h as useStarField,a as useWindowSize};
//# sourceMappingURL=starfield-react.module.js.map