react-simple-device-emulator/dist/esm/index.js

Simple React device emulator component for design display purposes

import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useMemo as n,useState as i,useEffect as t}from"react";function o(e){if("undefined"!=typeof window){var r=n((function(){return window.matchMedia(e)}),[e]),o=i(r.matches),d=o[0],a=o[1];return t((function(){var e=function(){return a(r.matches)};return r.addEventListener("change",e),function(){return r.removeEventListener("change",e)}}),[r]),d}}!function(e,r){void 0===r&&(r={});var n=r.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===n&&i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}(".device-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.mobile.device-wrapper {\r\n    background-color: #1d1f1e;\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 1rem;\r\n    border-radius: 32px;\r\n}\r\n\r\n.mobile .device-viewport {\r\n    width: 100%;\r\n    background-color: white;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n    border: solid 2px #585858;\r\n}\r\n\r\n.mobile .device-viewport iframe {\r\n    min-width: calc(100% + 17px);\r\n}\r\n\r\n.device-viewport iframe {\r\n    border: 0;\r\n}\r\n\r\n.device-viewport {\r\n    overflow-y: scroll;\r\n}\r\n\r\n.device-viewport img {\r\n    width: 100%;\r\n    height: unset;\r\n}\r\n\r\n.mobile .top-bar {\r\n    width: 100%;\r\n    min-height: 50px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.mobile .speaker {\r\n    width: 80px;\r\n    height: 6px;\r\n    border-radius: 12px;\r\n    background-color: #161616;\r\n    border: solid 1px #585858;\r\n}\r\n\r\n.mobile .bottom-bar {\r\n    width: 100%;\r\n    height: 80px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.mobile .button {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50px;\r\n    background-color: #161616;\r\n    border: solid 2px #585858;\r\n}\r\n\r\n.desktop.device-wrapper {\r\n    background-color: #1d1f1e;\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 2rem;\r\n    border-radius: 8px;\r\n    position: relative;\r\n    margin-bottom: 125px;\r\n} \r\n\r\n.desktop .bottom-bar {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    border-radius: 0 0 4px 4px;\r\n    background-color: #9f9fa4;\r\n    opacity: 1;\r\n    background-size: 4px 4px;\r\n    background-image: repeating-linear-gradient(45deg, #dedede 0, #dedede 0.4px, #9f9fa4 0, #9f9fa4 50%);\r\n    height: 100px;\r\n}\r\n\r\n.desktop .monitor-stand {\r\n    position: absolute;\r\n    bottom: -125px;\r\n    width: 150px;\r\n    height: 125px;\r\n    background-color: #9f9fa4;\r\n    left: calc(50% - 75px);\r\n}\r\n\r\n.desktop .monitor-bottom {\r\n    position: absolute;\r\n    width: 300px;\r\n    height: 40px;\r\n    bottom: 0;\r\n    background-color: #9f9fa4;\r\n    left: -75px;\r\n    border-radius: 50px;\r\n}");var d=function(n){var d=i(n.mobileBreakPoint),a=d[0],c=d[1],l=i(n.mobileBreakPoint),p=l[0],s=l[1];t((function(){m&&c(n.scaleMobile),h&&c(n.scaleTablet),b&&c(n.scaleDesktop),"undefined"!=typeof window&&s(window.innerWidth)}),[c,a,s,p]);var m=o("(max-width: ".concat(n.mobileBreakPoint,"px)")),h=o("(max-width: ".concat(n.tabletBreakPoint,"px)")),b=o("(min-width: ".concat(n.desktopBreakPoint,"px)")),u="desktop"==n.deviceType?n.deviceHeight*a+125+"px":n.deviceHeight*a+"px";return e("div",{className:"device-container",style:{height:u},children:r("div",{className:"device-wrapper "+n.deviceType,style:{minWidth:n.deviceWidth,height:n.deviceHeight,scale:a},children:[e("div",{className:"top-bar",children:e("span",{className:"speaker"})}),e("div",{className:"device-viewport",style:{minHeight:n.deviceHeight-160},children:n.children}),e("div",{className:"bottom-bar",children:e("div",{className:"button"})}),n.deviceType&&e("div",{className:"monitor-stand",children:e("div",{className:"monitor-bottom"})})]})})};export{d as DeviceComponent};
//# sourceMappingURL=index.js.map