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

Simple React device emulator component for design display purposes

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react");function n(e){if("undefined"!=typeof window){var n=r.useMemo((function(){return window.matchMedia(e)}),[e]),t=r.useState(n.matches),i=t[0],o=t[1];return r.useEffect((function(){var e=function(){return o(n.matches)};return n.addEventListener("change",e),function(){return n.removeEventListener("change",e)}}),[n]),i}}!function(e,r){void 0===r&&(r={});var n=r.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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}");exports.DeviceComponent=function(t){var i=r.useState(t.mobileBreakPoint),o=i[0],d=i[1],a=r.useState(t.mobileBreakPoint),c=a[0],s=a[1];r.useEffect((function(){l&&d(t.scaleMobile),p&&d(t.scaleTablet),m&&d(t.scaleDesktop),"undefined"!=typeof window&&s(window.innerWidth)}),[d,o,s,c]);var l=n("(max-width: ".concat(t.mobileBreakPoint,"px)")),p=n("(max-width: ".concat(t.tabletBreakPoint,"px)")),m=n("(min-width: ".concat(t.desktopBreakPoint,"px)")),h="desktop"==t.deviceType?t.deviceHeight*o+125+"px":t.deviceHeight*o+"px";return e.jsx("div",{className:"device-container",style:{height:h},children:e.jsxs("div",{className:"device-wrapper "+t.deviceType,style:{minWidth:t.deviceWidth,height:t.deviceHeight,scale:o},children:[e.jsx("div",{className:"top-bar",children:e.jsx("span",{className:"speaker"})}),e.jsx("div",{className:"device-viewport",style:{minHeight:t.deviceHeight-160},children:t.children}),e.jsx("div",{className:"bottom-bar",children:e.jsx("div",{className:"button"})}),t.deviceType&&e.jsx("div",{className:"monitor-stand",children:e.jsx("div",{className:"monitor-bottom"})})]})})};
//# sourceMappingURL=index.js.map