# react-app-preview-component

> A component to elegantly display app screenshots framed by mobile and desktop devices.

Latest version **0.0.66** (published 2018-03-04) · 0 weekly downloads

## Install

```sh
npm install react-app-preview-component
pnpm add react-app-preview-component
yarn add react-app-preview-component
bun add react-app-preview-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.66 |
| Published | 2018-03-04 |
| First published | 2018-02-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Daniel Hollcraft |
| Maintainers | danielhollcraft |

## Links

- npm: https://www.npmjs.com/package/react-app-preview-component
- Repository: https://github.com/danielbh/react-app-preview-component
- Homepage: https://github.com/danielbh/react-app-preview-component#readme
- Issues: https://github.com/danielbh/react-app-preview-component/issues
- npm.io page: https://npm.io/package/react-app-preview-component

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Recent versions

- 0.0.66 (latest) — 2018-03-04
- 0.0.65 — 2018-02-28
- 0.0.64 — 2018-02-28
- 0.0.63 — 2018-02-28
- 0.0.62 — 2018-02-28
- 0.0.61 — 2018-02-27
- 0.0.6 — 2018-02-27
- 0.0.5 — 2018-02-27
- 0.0.4 — 2018-02-27
- 0.0.3 — 2018-02-27
- 0.0.2 — 2018-02-25

## README

# 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'

<IPhoneX>
  <img src={IPhoneXScreenshot} alt="iPhone X Screenshot" />
</IPhoneX>
```

#### With a Carousel

##### Props

<table>
<tbody>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<tr>
  <td>carousel</td>
  <td>boolean</td>
  <td>false</td>
  <td>Toggle if images can change.</td>
</tr>
<tr>
  <td>changeOnClick</td>
  <td>boolean</td>
  <td>false</td>
  <td>Only change screenshot slide on click. By default <br> carousel will slide automatically on interval.</td>
</tr>
<tr>
  <td>interval</td>
  <td>float</td>
  <td>2000</td>
  <td>Duration between slide change.</td>
</tr>
</tbody>
</table>

```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'

<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](https://facebook.design/devices)

---
_Source: https://npm.io/package/react-app-preview-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._