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 = ="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 => <img = ="iPhone X Screenshot1" /> <img = ="iPhone X Screenshot2" /> <img = ="iPhone X Screenshot3" /></IPhoneX>
Please help me make this library better by submitting issues or pull requests
Device assets courtesy of Facebook Design