0.1.11 • Published 5 years ago
react-css-devices-supportchef v0.1.11
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
Author
Any suggestions / improvements / critics are welcome. I'm available on @aswinckr