React-device-display NPM

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:

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:

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

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