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