react-app-preview-component

npm i react-app-preview-component

React component to display app previews beautifully with Desktop and Mobile screenshots. Each screenshot can be framed by a specific device. Below is a list of devices with the best widths and heights of screenshots for each device.

#### Recommended Sizes for Screenshots
| Device | Width | Height | Aspect Ratio
| ---------------|-------| --------| --------------|
| iPhone X | 242 | 524 | 0.46 |
| iPhone 8 | 238 | 423 | 0.56 |
| iPad | 418 | 559 | 0.75 |
| Macbook Pro | 625 | 390 | 1.6 |
| iMac | 737 | 415 | 1.78 |
| Google Pixel 2 | 255 | 452 | .56 |

See the ./storybook for implementation examples

#### Default Implementation

``jsx
import { IPhoneX } from 'react-app-preview-component'
import IPhoneXScreenshot from './screenshots/iphone_x_screenshot.png'




`

#### With a Carousel

##### Props

`jsx
import { IPhoneX } from 'react-app-preview-component'
import IPhoneXScreenshot1 from './screenshots/iphone_x_screenshot1.png'
import IPhoneXScreenshot2 from './screenshots/iphone_x_screenshot2.png'
import IPhoneXScreenshot3 from './screenshots/iphone_x_screenshot3.png'






``

$3

Device assets courtesy of Facebook Design