react-device-mockup

!Static Badge


!GitHub top language
!GitHub License

You can check out the
🌐 full-demo-here
Package for React Native is 🌐 here

Index

1. Introduction
2. Installation
3. How to use
4. Props
5. Demo
6. 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

$3

You can check demo

| prop | Required | Type | Default | Description |
| ------------------ | :------: | ---------------- | ----------- | ----------- |
| screenWidth | O | number | | Width of mockup screen
details |
| 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 |
| navBar | X | "swipe"
"bhr"
"rhb" | "swipe" | Type of navigation bar
details |
| navBarColor | X | Property.Color | "#CCCCCC" | Color of navigation bar |
| transparentNavBar | X | boolean | false | Make the navigation bar transparent.
details |
| hideNavBar | X | boolean | false | Hide the navigation bar
details |
| transparentCamArea | X | boolean | false | NOTE: AndroidMockup only.
Make the area around the camera transparent.
Only works when isLandscape=true.
details |
| children | X | ReactNode | | Components to be rendered on the mockup screen |

$3

You can check demo

| prop | Required | Type | Default | Description |
| ----------------- | :------: | ---------------- | ----------- | ----------- |
| screenWidth | O | number | | Width of mockup screen
details |
| 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 |
| transparentNavBar | X | boolean | false | Make the navigation bar transparent.
details |
| hideNavBar | X | boolean | false | Hide the navigation bar
details |
| 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

$3

$3

- AndroidMockup
- AndroidTabMockup

#### AndroidMockup default mockups

| isLandscape=false | isLandscape=true |
| :--: | :--: |
|!and_default | !and_default_land |

#### AndroidTabMockup default mockups

| isLandscape=false | isLandscape=true |
| :--: | :--: |
| !and_tab | !and_tab_land |

#### hideStatusBar & hideNavBar

` tsx
hideStatusBar={true}
hideNavBar={true}
`

| isLandscape=false | isLandscape=true |
| :--: | :--: |
| !and_all_hide | !and_all_hide_land |

#### other props

| noRoundedScreen | frameColor="green"
statusbarColor="red"
navBarColor="blue" |
| :--: | :--: |
| !and_noRoundedScreen | !and_colors |

#### default with child

| isLandscape=false | isLandscape=true |
| :--: | :--: |
| !and_default_child | !and_land_default_child |

#### props.hideStatusBar

| isLandscape=false | isLandscape=true |
| :--: | :--: |
| !hidestatusbar | !hidestatusbar_land |

#### props.transparentNavBar

| isLandscape=false | isLandscape=true |
| :--: | :--: |
| !trans_navi
navBar="bhr" | !trans_navi_land
navBar="bhr" |

#### props.hideNavBar

| isLandscape=false | isLandscape=true |
| :--: | :--: |
| !hide_navi | !hide_navi_land |

#### props.transparentCamArea

AndroidMockup, landscape only
| isLandscape=false | isLandscape=true |
| :--: | :--: |
| none | !transparentCamArea |

$3

- 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" | !iphone_island | !iphone_island_land |
| "notch" | !iphone_notch | !iphone_notch_land |
| "legacy" | !iphone_legacy | !iphone_legacy_land |

#### 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" | !ipad_modern | !ipad_modern_land |
| "legacy"` | !ipad_legacy | !ipad_legacy_land |

License

MIT license