React iPhone Preview Component

The React iPhone Preview is a simple component that lets you showcase content inside an iPhone X illustration.

Installation

``bash
npm install react-iphone-preview
`

`jsx
import { IphonePreview } from 'react-iphone-preview';
`

Usage

To use the IphonePreview component, simply render it in your JSX:

`jsx
} />
`

Props

$3

The content prop allows you to insert any React nodes (components, images, text) inside the iPhone's screen area.

- Type: PropTypes.node
- Default: null

$3

The overlayStyle prop is an object that lets you pass additional inline styles to the overlay (the content area inside the iPhone's screen). This provides an easy way to customize the appearance of the content being displayed.

- Type: PropTypes.object
- Default: {}

Customizing Overlay Styles

To customize the styles of the overlay, you can leverage the overlayStyle prop:

`jsx
content={"This is an Example"}
overlayStyle={{
backgroundColor: 'rgba(255, 0, 0, 0.3)', // Example: Setting a red background with 30% opacity
// ... any other valid inline styles
}}
/>
``