react-device-frame

React Device Frame

React wrapper for device frame based on Devices.css.

Devices preview: Demo

Supported devices

iPhone X (Silver)

iPhone 8 (Silver, Gold and Black)

iPhone 8 Plus (Silver, Gold and Black)

iPhone 5S (Silver, Gold and Black)

iPhone 5C (White, Red, Yellow, Green and Blue)

iPhone 4S (Silver, Gold and Black)

iPad (White and Black)

MacBook Pro

Samsung Galaxy S5

Samsung Galaxy Note 8

HTC one

Nexus 5

Lumia 920 (White, Red, Yellow, Black and Blue)

Installation

$ npm i react-device-frame --save

Usage

import React, { Component } from "react";
import Device from "react-device-frame";
 
class myDevice extends Component {
  render() {
    return <Device name="iphone-8" color="gold" url="https://www.google.com" />;
  }
}
 
export default myDevice;

Properties

Property	Value	Type
name	iphone-x, iphone-8, iphone-8plus, iphone-5s, iphone-5c, iphone-4s, ipad-mini, nexus-5, htc-one, galaxy-s5, galaxy-note8, macbook-pro	string
color	white, red, yellow, black, blue, gold, silver	string
url	e.g https://www.google.com	string
portrait	true, false	boolean
landscape	true, false	boolean

LICENSE: MIT

Developer: Olalekan Animashaun