React Device Emulator

A lightweight device emulator for ReactJS web applications. It enables you to visualize websites (using the URL), React components and/or full React apps in mobile and tab devices.

Installing as a package

npm install react-device-emulator --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import DeviceEmulator from 'react-device-emulator';
import 'react-device-emulator/lib/styles/style.css';

const App = () => {
  return (
    <div>
      <DeviceEmulator type="tab" withDeviceSwitch withRotator>
        <h1>Welcome to React Device Emulator</h1>
      </DeviceEmulator>
      <DeviceEmulator type="mobile" withDeviceSwitch withRotator url="www.worksfair.com">
      <DeviceEmulator type="tab" withoutChrome url="www.worksfair.com">
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('#root'));
// Remember to include the css in your file

// Using webpack
// import 'react-device-emulator/lib/styles/style.css';

// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-device-emulator/styles/style.css" />

=====================

1. Mobile device with switch button and rotator

2. Tab device with Rotator only.

3. Tab device without the chrome

=====================

Attributes	Type	Default	Description
withoutChrome	boolean	false	removes the device chrome and shows only the frame for the display
type	string	mobile	the type of device. It can be mobile or tab
withDeviceSwitch	boolean	false	show device switches for switching between device types
withRotator	boolean	false	show the rotate button for rotating the device
url	string	''	for specifying the url of the website to be displayed in the emulator
isRotated	boolean	false	used to initialize the emulator in a rotated state
children	object	null	the children to the emulator component. Typically the app or component you want to show on the emulator

NB: When both url and children are provided, url will used and children ignored.

=====================

Setting up development environment

• git clone https://github.com/TheoOkafor/react-device-emulator.git
• yarn
• yarn start
• Open localhost:8080 on your favorite browser

Running tests

• yarn test

Raising issues

When raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting will be appreciated. You can also suggest the features you want included in the subsequent versions.

Demo