UNPKG

dynascale

Version:

![NPM Version](https://img.shields.io/npm/v/dynascale) ![NPM Last Update](https://img.shields.io/npm/last-update/dynascale) ![NPM Type Definitions](https://img.shields.io/npm/types/dynascale) ![NPM Downloads](https://img.shields.io/npm/dw/dynascale)

3 lines (2 loc) 2.12 kB
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dynascale{display:flex;align-items:center;justify-content:center;position:relative;max-width:100%;max-height:100%;overflow:hidden}.dynascale__content{transform-origin:center;transition:transform .2s ease}.dynascale__debug{position:absolute;top:10px;right:10px;background-color:#000000b3;color:#fff;padding:8px;border-radius:4px;font-size:12px;z-index:10}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})(); (function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.dynascale={},t.ReactJsxRuntime,t.React))})(this,function(t,e,n){"use strict";const S=({defaultScale:p=0,minScale:h=.1,margin:d=0,className:g="",debug:b=!1,children:y})=>{const i=n.useRef(null),c=n.useRef(null),[r,w]=n.useState(p),[u,v]=n.useState({width:0,height:0}),[o,F]=n.useState({width:0,height:0}),a=n.useCallback(()=>{if(!i.current||!c.current)return;const s=i.current.clientWidth,l=i.current.clientHeight,f=c.current.clientWidth,x=c.current.clientHeight,z=s/f,C=l/x,j=Math.max(Math.min(z,C)*(1-d),h);w(j),v({width:s,height:l}),F({width:f,height:x})},[d,h]);return n.useEffect(()=>{if(!i.current||!c.current)return;a();const s=new ResizeObserver(a);return s.observe(i.current),s.observe(c.current),()=>{s.disconnect()}},[d,a]),e.jsxs("div",{ref:i,className:`dynascale ${g}`,children:[e.jsx("div",{ref:c,className:"dynascale__content",style:{transform:`scale(${r})`},children:y}),b&&e.jsxs("div",{className:"dynascale__debug",children:["Scale: ",r.toFixed(2),e.jsx("br",{}),"Container: ",u.width.toFixed(),"×",u.height.toFixed(),"px",e.jsx("br",{}),"Content: ",o.width.toFixed(),"×",o.height.toFixed(),"px",e.jsx("br",{}),"Actual: ",(o.width*r).toFixed(),"×",(o.height*r).toFixed(),"px"]})]})};t.Dynascale=S,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});