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

import { IPhoneX } from 'react-app-preview-component'
import IPhoneXScreenshot from './screenshots/iphone_x_screenshot.png'
 
<IPhoneX>
  <img src={IPhoneXScreenshot} alt="iPhone X Screenshot" />
</IPhoneX>

With a Carousel

Props

Name	Type	Default	Description
carousel	boolean	false	Toggle if images can change.
changeOnClick	boolean	false	Only change screenshot slide on click. By default carousel will slide automatically on interval.
interval	float	2000	Duration between slide change.

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'
 
<IPhoneX carousel interval={3000}>
  <img src={IPhoneXScreenshot} alt="iPhone X Screenshot1" />
  <img src={IPhoneXScreenshot2} alt="iPhone X Screenshot2" />
  <img src={IPhoneXScreenshot3} alt="iPhone X Screenshot3" />
</IPhoneX>

Please help me make this library better by submitting issues or pull requests

Device assets courtesy of Facebook Design