Package Exports

phone-mockup-react
phone-mockup-react/dist/index.esm.js
phone-mockup-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (phone-mockup-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

📱 phone-mockup-react

A ready-to-use React component for displaying various phone mockups.

Installation & Usage

1. Install the package

npm install phone-mockup-react
# or with yarn
yarn add phone-mockup-react

2. Import styles and component

At the top of your main app file (e.g., App.tsx or index.tsx):

import 'phone-mockup-react/dist/styles.css'; // Import the package styles
import { PhoneMockup } from 'phone-mockup-react';

3. Use the component

<PhoneMockup model="iphone-16">
  <div>
    <h2>Your custom content</h2>
    <p>This content will be displayed inside the phone frame.</p>
  </div>
</PhoneMockup>

Supported models:

iphone-16
iphone-15
iphone-14
samsung-s24
samsung-a54
samsung-s23
pixel-8
pixel-7
xiaomi-14
xiaomi-13

4. Notes

Make sure to import the styles as shown above:
```
import 'phone-mockup-react/dist/styles.css';
```
If you use TypeScript, types are included automatically.
To change the theme or phone model, just update the corresponding prop.

Full Example

import React from 'react';
import 'phone-mockup-react/dist/styles.css';
import { PhoneMockup } from 'phone-mockup-react';

function App() {
  return (
    <PhoneMockup model="iphone-16">
      <div style={{ padding: 20, textAlign: 'center' }}>
        <h2>Hello World!</h2>
        <p>This is a test of PhoneMockup.</p>
      </div>
    </PhoneMockup>
  );
}

export default App;

📱 phone-mockup-react

کامپوننت آماده برای نمایش مکاپ گوشی‌های مختلف در React

نصب و راه‌اندازی

۱. نصب پکیج

npm install phone-mockup-react
# یا با yarn
yarn add phone-mockup-react

۲. ایمپورت استایل و کامپوننت

در ابتدای فایل اصلی اپلیکیشن (مثلاً App.tsx یا index.tsx):

import 'phone-mockup-react/dist/styles.css'; // استایل پکیج را ایمپورت کنید
import { PhoneMockup } from 'phone-mockup-react';

۳. استفاده از کامپوننت

<PhoneMockup model="iphone-16">
  <div>
    <h2>محتوای دلخواه شما</h2>
    <p>این محتوا داخل قاب گوشی نمایش داده می‌شود.</p>
  </div>
</PhoneMockup>

مدل‌های پشتیبانی‌شده:

iphone-16
iphone-15
iphone-14
samsung-s24
samsung-a54
samsung-s23
pixel-8
pixel-7
xiaomi-14
xiaomi-13

۴. نکات مهم

حتماً استایل را به صورت زیر ایمپورت کنید:
```
import 'phone-mockup-react/dist/styles.css';
```
اگر از TypeScript استفاده می‌کنید، تایپ‌ها به صورت خودکار شناسایی می‌شوند.
برای تغییر تم یا مدل گوشی، کافیست prop مربوطه را تغییر دهید.

نمونه کامل

import React from 'react';
import 'phone-mockup-react/dist/styles.css';
import { PhoneMockup } from 'phone-mockup-react';

function App() {
  return (
    <PhoneMockup model="iphone-16">
      <div style={{ padding: 20, textAlign: 'center' }}>
        <h2>سلام دنیا!</h2>
        <p>این یک تست از PhoneMockup است.</p>
      </div>
    </PhoneMockup>
  );
}

export default App;

Features

🎨 Multiple phone models support
📱 Realistic device frames and notches
🎯 Dynamic Island support for iPhone 16
💫 Smooth animations and transitions
🎮 Interactive elements
📦 Zero dependencies
🎯 TypeScript support
🎨 Customizable styles

Supported Phone Models

iPhone Models

iPhone 16
- Dynamic Island
- Dimensions: 393x852px
- Notch design
- Modern rounded corners
iPhone 15
- Dimensions: 393x852px
- Notch design
- Modern rounded corners
iPhone 14
- Dimensions: 390x844px
- Notch design
- Modern rounded corners

Samsung Models

Samsung S24
- Dimensions: 360x780px
- Punch hole camera
- Rounded corners (35px)
Samsung A54
- Dimensions: 360x780px
- Punch hole camera
- Rounded corners (35px)
Samsung S23
- Dimensions: 360x780px
- Punch hole camera
- Rounded corners (35px)

Google Pixel Models

Pixel 8
- Dimensions: 370x790px
- Punch hole camera
- Rounded corners (32px)
Pixel 7
- Dimensions: 370x790px
- Punch hole camera
- Rounded corners (32px)

Xiaomi Models

Xiaomi 14
- Dimensions: 365x785px
- Punch hole camera
- Rounded corners (38px)
Xiaomi 13
- Dimensions: 365x785px
- Punch hole camera
- Rounded corners (38px)

Props

Prop	Type	Default	Description
model	PhoneModel	'iphone-16'	The phone model to display
children	ReactNode	-	Content to display inside the phone screen
className	string	''	Additional CSS class name

PhoneModel Type

type PhoneModel = 
  | 'iphone-16'
  | 'iphone-15'
  | 'iphone-14'
  | 'samsung-s24'
  | 'samsung-a54'
  | 'samsung-s23'
  | 'pixel-8'
  | 'pixel-7'
  | 'xiaomi-14'
  | 'xiaomi-13';

Features by Model

Common Features

Realistic device frames
Power button
Volume buttons
Smooth animations
Responsive design

iPhone-Specific Features

Notch design
Dynamic Island (iPhone 16 only)
iOS-style rounded corners

Android-Specific Features

Punch hole camera
Android-style rounded corners
Different aspect ratios

Examples

Basic Usage

<PhoneMockup model="iphone-16">
  <div>Hello World!</div>
</PhoneMockup>

Different Models

<PhoneMockup model="samsung-s24">
  <div>Samsung Content</div>
</PhoneMockup>

<PhoneMockup model="pixel-8">
  <div>Pixel Content</div>
</PhoneMockup>

With Custom Styling

<PhoneMockup model="xiaomi-14" className="custom-phone">
  <div>Custom Styled Content</div>
</PhoneMockup>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.