react-css-devices

(fork available as react-css-devices-supportchef)

Key differences of fork

• Exports availableDevices
• Has latest Marvel devices, (iPhone X and Note 8)

React component for CSS Devices in your project. (NOTE: This project is still work in progress. Marvel Devices are however ready to use. More devices and customization coming soon.)

Installation

npm install --save react-css-devices

Important Note : You need to have a css-loader installed. for example with webpack

Props

Props	Cool	Prop Values
deviceName (String)	Name of the device	iphone6, iphone6plus, iphone5s, iphone5c, ipad, iphone4s, nexus5, s5, htc-one, macbook
color (String)	Color ( only supported by iphone5c for now )	white, black, red, yellow, green, blue
orientation (String)	Landscape or portrait	landscape, portrait
transform (Integer)	Scale the device to your size ( Size chart below )	default is 1

Size Chart

Device	1x Portrait Size ( Device )	1x Portrait Size ( Screen )
iphone6	423x887	375x667
iphone6plus	466x960	414x736
iphone5s	364x778	320x568
iphone5c	364x778	320x568
ipad	626x948	576x768
iphone4s	374x738	320x480
nexus5	350x668	320x568
s5	356x688	320x568
htc-one	370x740	320x568
macbook	1048x720	960x600

Examples

To create a black iphone in landscape you do

import { MarvelDevices } from 'react-css-devices'

<MarvelDevices deviceName={"iphone6"}
               color={"black"}
               orientation={"landscape"}
               transform={0.5}>
    
    {/*Paste your content here*/}
    <img src={"http://via.placeholder.com/667x375"}/> 
     
</MarvelDevices>

Credits

Marvel devices

Author

Any suggestions / improvements / critics are welcome. I'm available on @aswinckr