retro-react/dist/esm/components/pixelatedimage/PixelatedImage.js

A React component library for building retro-style websites

import{__rest as e}from"../../_virtual/_tslib.js";import{forwardRef as t,useRef as i,useImperativeHandle as s,useEffect as r}from"react";import{jsx as o}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as a}from"../../utils/classNames.js";const m=t(((t,m)=>{var{id:n,className:c,src:d,blockSize:l=20,width:h=600,height:g=600,style:u}=t,w=e(t,["id","className","src","blockSize","width","height","style"]);const f=i(null);return s(m,(()=>f.current||document.createElement("canvas"))),r((()=>{const e=f.current;if(!e)return;const t=e.getContext("2d");if(!t)return;t.imageSmoothingEnabled=!1;const i=new Image;i.crossOrigin="Anonymous",i.src=d,i.onload=()=>{const s=.01*l,r=e.width*s,o=e.height*s;t.drawImage(i,0,0,r,o),t.drawImage(e,0,0,r,o,0,0,e.width,e.height)}}),[d,l]),o("canvas",Object.assign({ref:f,id:n,className:a("pixelated-image-root",c),width:h,height:g,style:u},w),void 0)}));m.displayName="PixelatedImage";export{m as PixelatedImage};