# react-device-mockup
[](https://jung-youngmin.github.io/react-device-mockup-demo/)
[](https://github.com/jung-youngmin/react-device-mockup)
[](https://www.npmjs.com/package/react-device-mockup)
[](https://www.npmjs.com/package/react-device-mockup)
[](https://github.com/jung-youngmin/react-device-mockup)
You can check out the
[🌐 full-demo-here](https://jung-youngmin.github.io/react-device-mockup-demo/)
Package for **React Native** is [🌐 here](https://github.com/jung-youngmin/react-native-device-mockup)
## Index
1. [Introduction](#introduction)
2. [Installation](#installation)
3. [How to use](#how-to-use)
4. [Props](#props)
5. [Demo](#demo)
6. [License](#license)
## Introduction
`react-device-mockup` provides frame mockups for Android and iOS devices.
You can use this library when you need a device demo for your app.
**Every mockup is rendered as pure `div` tags.**
`react-device-mockup` provides the following mockups:
1. Android
1. Phone: 19.5:9 aspect ratio, `AndroidMockup`
2. Tablet: 16:10 aspect ratio, `AndroidTabMockup`
2. iOS
1. iPhone, `IPhoneMockup`
1. legacy iPhone: iPhone SE3
2. notched iPhone: iPhone 14
3. Dynamic island iPhone: iPhone 15 Pro
2. iPad, `IPadMockup`
1. legacy iPad 4:3 aspect ratio (home button)
2. modern iPad: 4.3:3 aspect ratio (no home button)
## Installation
No dependencies. Just install it
``` bash
npm install react-device-mockup
```
or if you use yarn
``` bash
yarn add react-device-mockup
```
## How to use
``` tsx
import {
AndroidMockup,
AndroidTabMockup,
IPhoneMockup,
IPadMockup
}
from "react-device-mockup"
return (
<>
{/* Android Phone */}
{/* your demo */}
{...}
{/* Android Tablet */}
{/* your demo */}
{...}
{/* iPhone */}
{/* your demo */}
{...}
{/* iPad */}
{/* your demo */}
{...}
)
```
## Props
### AndroidMockup & AndroidTabMockup
You can check [demo](#demo-android)
| prop | Required | Type | Default | Description |
| ------------------ | :------: | ---------------- | ----------- | ----------- |
| screenWidth | O | `number` | | Width of mockup screen
[details](#screenwidth) |
| noRoundedScreen | X | `boolean` | `false` | No use rounded screen corners. |
| isLandscape | X | `boolean` | `false` | portrait or landscape
`false` means portrait |
| className | X | `string` | | class name for mockup container |
| containerStlye | X | `CSSProperties` | | Styles for mockup container |
| frameColor | X | `Property.Color` | `"#666666"` | Color of Frame |
| frameOnly | X | `boolean` | `false` | Only the frame is shown.
Power button and volume buttons are hidden |
| statusbarColor | X | `Property.Color` | `"#CCCCCC"` | Color of status bar |
| hideStatusBar | X | `boolean` | `false` | Hide the status bar
[details](#hidestatusbar) |
| navBar | X | `"swipe"`
`"bhr"`
`"rhb"` | `"swipe"` | Type of navigation bar
[details](#navbar) |
| navBarColor | X | `Property.Color` | `"#CCCCCC"` | Color of navigation bar |
| transparentNavBar | X | `boolean` | `false` | Make the navigation bar transparent.
[details](#transparentnavbar) |
| hideNavBar | X | `boolean` | `false` | Hide the navigation bar
[details](#hidenavbar) |
| transparentCamArea | X | `boolean` | `false` | *NOTE: AndroidMockup only.*
Make the area around the camera transparent.
Only works when `isLandscape=true`.
[details](#transparentcamarea) |
| children | X | `ReactNode` | | Components to be rendered on the mockup screen |
### IPhoneMockup & IPadMockup
You can check [demo](#demo-ios)
| prop | Required | Type | Default | Description |
| ----------------- | :------: | ---------------- | ----------- | ----------- |
| screenWidth | O | `number` | | Width of mockup screen
[details](#screenwidth) |
| screenType | X | `"legacy"`
`"notch"`
`"island"` | `"island"` | *for IPhoneMokcup*
`"legacy"`: Classic iphone such as iPhone SE3
`"notch"`: Notched iPhone such as iPhone 14
`"island"`: Dynamic island iPhone such as iPhone 15 Pro |
| screenType | X | `"legacy"`
`"modern"` | `"modern"` | *for IPadMockup*
`"legacy"`: Classic iPad such as iPad 9th
`"modern"`: Modern iPad such as iPad Pro 13-inch |
| isLandscape | X | `boolean` | `false` | portrait or landscape
`false` means portrait |
| className | X | `string` | | class name for mockup container |
| containerStlye | X | `CSSProperties` | | Styles for mockup container |
| frameColor | X | `Property.Color` | `"#666666"` | Color of Frame |
| frameOnly | X | `boolean` | `false` | Only the frame is shown.
Power button and volume buttons are hidden |
| statusbarColor | X | `Property.Color` | `"#CCCCCC"` | Color of status bar |
| hideStatusBar | X | `boolean` | `false` | Hide the status bar
[details](#hidestatusbar) |
| transparentNavBar | X | `boolean` | `false` | Make the navigation bar transparent.
[details](#transparentnavbar) |
| hideNavBar | X | `boolean` | `false` | Hide the navigation bar
[details](#hidenavbar) |
| children | X | `ReactNode` | | Components to be rendered on the mockup screen |
#### screenWidth
Width of mockup screen.
The height is automatically calculated according to the ratio.
> **NOTE**
> It does not mean the full width of the mockup being rendered.
#### hideStatusBar
Hide the status bar.
- `false`: Status bar occupies its own space with `statusbarColor`. (default)
- `true`: Status bar no longer occupies its own area, but becomes part of the screen area.
> **NOTE**
> When `isLandscape=true` and `screenType="legacy"` in `iPhoneMockup`,
> the status bar is always hidden regardless of `hideStatusBar`.
> Even on the REAL classic iPhone, the status bar is always hidden when in landscape mode.
#### navBar
Type of navigation bar.
- `"swipe"`: swipe gesture navigation bar. (modern style)
- `"bhr"`: back-home-recent buttons. (classic style)
- `"rhb"`: recent-home-back. (classic style)
> This prop is only for
> `AndroidMockup`, `AndroidTabMockup`
#### transparentNavBar
Make the navigation bar transparent.
- `false`: Navigation bar occupies its own space with `navBarColor`. (default)
- `true`: Navigation bar no longer occupies its own area, but becomes part of the screen area.
- **NOTE:** Swipe bar or buttons are rendered according to the type specified by `navBar` props.
> **NOTE**
> When `screenType="legacy"` in `iPhoneMockup`, `transparentNavBar` is always ignored.
#### hideNavBar
Hide the navigation bar.
- `false`: Show the navigation bar. (default)
- `true`: Hide the navigation bar.
- Navigation bar no longer occupies its own area,
but becomes part of the screen area.
- **NOTE:** Swipe bar or buttons are **NOT** rendered according to the type specified by `navBar` props.
> **NOTE**
> When `screenType="legacy"` in `iPhoneMockup`, `hideNavBar` is always ignored.
#### transparentCamArea
*AndroidMockup only.*
Make the area around the camera transparent.
It only works when `isLandscape=true`.
It is ignored when `isLandscape=false`
> **CamArea** (Camera area)
> The part that was the status bar when in Portrait.
> When in Landscape, in Android Native, this part is simply expressed as an empty (blank) area.
>
> This prop is **only for**
> `AndroidMockup`
## Demo
### [🌐 full-demo](https://jung-youngmin.github.io/react-device-mockup-demo/)
### Demo: Android
- `AndroidMockup`
- `AndroidTabMockup`
#### `AndroidMockup` default mockups
| isLandscape=false | isLandscape=true |
| :--: | :--: |
| |  |
#### `AndroidTabMockup` default mockups
| isLandscape=false | isLandscape=true |
| :--: | :--: |
|  |  |
#### hideStatusBar & hideNavBar
``` tsx
hideStatusBar={true}
hideNavBar={true}
```
| isLandscape=false | isLandscape=true |
| :--: | :--: |
|  |  |
#### other props
| noRoundedScreen | frameColor="green"
statusbarColor="red"
navBarColor="blue" |
| :--: | :--: |
|  |  |
#### default with child
| isLandscape=false | isLandscape=true |
| :--: | :--: |
|  |  |
#### props.hideStatusBar
| isLandscape=false | isLandscape=true |
| :--: | :--: |
|  |  |
#### props.transparentNavBar
| isLandscape=false | isLandscape=true |
| :--: | :--: |
| 
`navBar="bhr"` | 
`navBar="bhr"` |
#### props.hideNavBar
| isLandscape=false | isLandscape=true |
| :--: | :--: |
|  |  |
#### props.transparentCamArea
AndroidMockup, landscape only
| isLandscape=false | isLandscape=true |
| :--: | :--: |
| none |  |
### Demo: iOS
- `IPhoneMockup`
- `IPadMockup`
#### IPhoneMockup
All props not mentioned are default.
Props with the same name as props in `AnroidMockup` work the same way.
| screenType | isLandscape=false | isLandscape=true |
| :--: | :--: | :--: |
| `"island"` |  |  |
| `"notch"` |  |  |
| `"legacy"` |  |  |
#### IPadMockup
All props not mentioned are default.
Props with the same name as props in `AnroidMockup` work the same way.
| screenType | isLandscape=false | isLandscape=true |
| :--: | :--: | :--: |
| `"modern"` |  |  |
| `"legacy"` |  |  |
## License
MIT license