Introduction
This project was started because I wanted a way to demonstrate responsiveness in an interactive way. While investigating options, I found that there wasn't much available that I could use that was lightweight and could be used for simple demonstration purposes.
Project Details
This project is a reusable react component for displaying demos of websites for different device sizes and types.
Key Features of this Component
This component takes several props which determine how the device will display. This has two main options "mobile" and "Desktop", this allows you to set the primary type of device.
Other options available are:
deviceWidth - This is used to set the width of the device.
deviceHeight - This is used to set the height of the device.
scaleDesktop, scaleTablet and scaleMobile are used to handle displaying the emulator on different devices, for example emulating a desktop, but ensuring the emulation looks good on an actual mobile device.
mobileBreakPoint, tabletBreakPoint and desktopBreakPoint are used in combination with the scale options to tell the component where your sites breakpoints are so it knows when the component should be scaled.
The component is a wrapper that takes either an iframe or an image and will display it how the component is configured.
<DeviceComponent
deviceType={'mobile'}
deviceWidth={400}
deviceHeight={600}
scaleDesktop={1}
scaleTablet={.6}
scaleMobile={.8}
mobileBreakPoint={450}
tabletBreakPoint={768}
desktopBreakPoint={1024}
>
<iframe src="https://react.dev" height="100%" width="100%" title="Iframe Example" ></iframe>
</DeviceComponent>
Examples
Desktop Emulation:
Mobile Emulation:
