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 customizable React component library for displaying realistic phone mockups (iPhone, Samsung, Pixel, Xiaomi, and more).

Installation

Install via npm:

npm install phone-mockup-react

or with yarn:

yarn add phone-mockup-react

Usage

Import the component and styles in your React project:

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

function App() {
  return (
    <PhoneMockup
      model="iphone-16"
      orientation="portrait"
      withShadow
    >
      <div>Your app content here</div>
    </PhoneMockup>
  );
}

Props

Prop	Type	Default	Description
`model`	string	"iphone-16"	Phone model: `"iphone-16"`, `"iphone-15"`, `"iphone-14"`, `"android-s24"`, etc.
`orientation`	string	"portrait"	`"portrait"` or `"landscape"`
`withShadow`	boolean	false	Show a drop shadow around the phone
`children`	ReactNode	—	Content to display inside the phone screen

Contributing & Local Testing

To develop or test the component locally, use the included test app (test-phone-mockup):

1. Clone the repository

git clone git@github.com:your-username/phone-mockup-react.git
cd phone-mockup-react

2. Install dependencies

npm install

3. Build the package

npm run build

4. Run the test app

The test app is in the test-phone-mockup folder. It uses the local version of your package.

cd test-phone-mockup
npm install
npm start

The test app will open at http://localhost:3000 and use your local package build.

Publishing

To publish a new version to npm:

Bump the version in package.json.
Build the package:
```
npm run build
```
Publish:
```
npm publish
```

License

MIT