Skip to content
Create quick app preview components on mobile and desktop
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
dist
src
stories
.babelrc
.eslintrc.json
.gitignore
.npmignore
.nvmrc
LICENSE
README.md
circle.yml
package-lock.json
package.json
webpack.config.js

README.md

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

You can’t perform that action at this time.