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

react-device-emulator (1)

Keywords

FAQs

What is react-device-emulator?

Is react-device-emulator popular?

Is react-device-emulator well maintained?

Last updated on 10 Jan 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket