# react-device-display

> `react-device-display` is a library that provides components to simulate the appearance of devices like iPhones and Macbooks in a React application.

Latest version **2.0.8** (published 2023-12-20) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-device-display
pnpm add react-device-display
yarn add react-device-display
bun add react-device-display
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.8 |
| Published | 2023-12-20 |
| First published | 2023-04-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 73.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jonathanpz890 |

## Links

- npm: https://www.npmjs.com/package/react-device-display
- Repository: https://github.com/Jonathanpz890/react-devices
- Homepage: https://github.com/Jonathanpz890/react-devices#readme
- Issues: https://github.com/Jonathanpz890/react-devices/issues
- npm.io page: https://npm.io/package/react-device-display

## Dependencies (15)

- [react](https://npm.io/package/react.md) >=16
- [eslint](https://npm.io/package/eslint.md) ^8.39.0
- [npm-watch](https://npm.io/package/npm-watch.md) ^0.11.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [typescript](https://npm.io/package/typescript.md) ^5.0.4
- [react-icons](https://npm.io/package/react-icons.md) ^4.8.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.0.38
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.12.2
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.6
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.6
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.32.2
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^5.59.0
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^4.6.0
- [react-use-draggable-scroll](https://npm.io/package/react-use-draggable-scroll.md) ^0.4.7
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) ^5.59.0

## Recent versions

- 2.0.8 (latest) — 2023-12-20
- 2.0.7 — 2023-12-20
- 2.0.6 — 2023-12-20
- 2.0.5 — 2023-04-29
- 2.0.4 — 2023-04-29
- 2.0.3 — 2023-04-29
- 2.0.2 — 2023-04-29
- 2.0.1 — 2023-04-28
- 2.0.0 — 2023-04-26
- 1.0.2 — 2023-04-25
- 1.0.1 — 2023-04-25
- 1.0.0 — 2023-04-23

## README

# React Device Display

`react-device-display` is a library that provides components to simulate the appearance of devices like iPhones and Macbooks in a React application.

## Installation

You can install `react-device-display` using npm:

```
npm install react-device-display
```

## Usage

### Mac component

The `Mac` component simulates the appearance of a Macbook. It accepts the following props:

| Prop         | Type              | Default | Description                                                                                                                 |
| ------------ | ----------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
| `open`       | boolean           | `true`  | Whether the Macbook is open or closed                                                                                       |
| `width`      | number            | `600`   | The width of the Macbook in pixels                                                                                          |
| `startup`    | boolean           | `false` | Whether to show a startup animation                                                                                         |
| `animateOpen`| boolean           | `false` | Whether to animate the opening/closing of the Macbook                                                                       |
| `openAngle`  | number (degrees)  | `0`     | The angle at which the Macbook opens (0 for fully flat, 90 for fully open)                                                   |
| `children`   | React.ReactNode  |         | The content to display on the Macbook screen                                                                                |

Here's an example usage of the `Mac` component:

```jsx
import { Mac } from 'react-device-display';

function App() {
  return (
    <Mac open={true} width={800} animateOpen={true} startup={true}>
      <h1>Hello, World!</h1>
    </Mac>
  );
}
```

### Iphone component

The `Iphone` component simulates the appearance of an iPhone. It accepts the following props:

| Prop        | Type             | Default | Description                                                         |
| ----------- | ---------------- | ------- | ------------------------------------------------------------------- |
| `width`     | number           | `400`   | The width of the iPhone in pixels                                   |
| `children`  | React.ReactNode |         | The content to display on the iPhone screen (e.g. a mobile website) |

Here's an example usage of the `Iphone` component:

```jsx
import { Iphone } from 'react-device-display';

function App() {
  return (
    <Iphone width={400}>
      <h1>Hello, World!</h1>
    </Iphone>
  );
}
```

## License

This library is licensed under the MIT License.

---
_Source: https://npm.io/package/react-device-display · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._