starfield-react/dist/starfield-react.esmodule.js

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

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