starfield-react/dist/starfield-react.umd.js

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

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