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 [email protected]: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:

1. Bump the version in package.json.
2. Build the package:

   npm run build

3. Publish:

   npm publish

License

MIT