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

A React component library for building retro-style websites

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