### Install React Device Frameset

Source: https://github.com/zheeeng/react-device-frameset/blob/main/README.md

Instructions for installing the `react-device-frameset` package using yarn, npm, or pnpm.

```bash
yarn add react-device-frameset (or npm/pnpm)
```

--------------------------------

### Install React Device Frameset Package

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset/README.md

Provides instructions for installing the `react-device-frameset` library using popular package managers like yarn, npm, or pnpm.

```bash
yarn add react-device-frameset (or npm/pnpm)
```

--------------------------------

### Implement Basic Device Emulator in React

Source: https://github.com/zheeeng/react-device-frameset/blob/main/README.md

This example demonstrates how to integrate the `DeviceEmulator` component into a React application. It imports necessary components and styles, then renders a `DeviceEmulator` that bans the 'HTC One' device, passing its configuration props to a nested `DeviceFrameset` component.

```TSX
import { DeviceFrameset, DeviceEmulator } from 'react-device-frameset'
import 'react-device-frameset/styles/marvel-devices.min.css'
import 'react-device-frameset/styles/device-emulator.min.css'

export const App = () => {
    return (
        <DeviceEmulator banDevices={["HTC One"]}>
            {props => <DeviceFrameset {...props} />}
        </DeviceEmulator>
    )
}
```

--------------------------------

### Importing Plain Text Content in React

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset-example/pages/legal$.mdx

This snippet demonstrates how to import plain text content, such as a license file, using a virtual module system in a React application. This pattern is often used to embed static text files directly into components for display.

```JavaScript
import { plainText as LICENSE } from '@virtual:plain-text/../../LICENSE'
```

--------------------------------

### Basic Usage of DeviceEmulator and DeviceFrameset

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset-example/pages/emulator$.mdx

This snippet illustrates how to set up and use the `DeviceEmulator` component from `react-device-frameset` to render a `DeviceFrameset`. It shows the required component and style imports, and how to pass props from `DeviceEmulator` to `DeviceFrameset` using a render prop pattern. The `banDevices` prop is used to exclude specific device types from emulation.

```jsx
import { DeviceFrameset, DeviceEmulator } from 'react-device-frameset'
import 'react-device-frameset/styles/device-emulator.css'
import 'react-device-frameset/styles/marvel-devices.css'

<DeviceEmulator banDevices={["HTC One"]}>
    {props => <DeviceFrameset {...props} />}
</DeviceEmulator>
```

--------------------------------

### Integrating DeviceFrameset and DeviceSelector Components in React

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset-example/pages/device$.mdx

This snippet illustrates how to import and utilize the `DeviceFrameset` and `DeviceSelector` components from the `react-device-frameset` library within a React application. It also includes the required CSS imports for styling. The `DeviceSelector` component acts as a wrapper, passing its properties to the `DeviceFrameset` component for rendering.

```JavaScript
import { DeviceFrameset, DeviceSelector } from 'react-device-frameset'
import 'react-device-frameset/styles/device-selector.css'
import 'react-device-frameset/styles/marvel-devices.css'

<DeviceSelector>
    {props => <DeviceFrameset {...props} />}
</DeviceSelector>
```

--------------------------------

### Implement React Device Emulator Component

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset/README.md

Demonstrates how to use the `DeviceEmulator` component from `react-device-frameset` within a React application. It imports necessary components and styles, then renders `DeviceEmulator` with a `banDevices` prop to exclude specific devices, passing its configuration to `DeviceFrameset` via a render prop.

```tsx
import { DeviceFrameset, DeviceEmulator } from 'react-device-frameset'
import 'react-device-frameset/styles/marvel-devices.min.css'
import 'react-device-frameset/styles/device-emulator.min.css'

export const App = () => {
    return (
        <DeviceEmulator banDevices={["HTC One"]}>
            {props => <DeviceFrameset {...props} />}
        </DeviceEmulator>
    )
}
```

--------------------------------

### Basic Usage of DeviceFrameset Component

Source: https://github.com/zheeeng/react-device-frameset/blob/main/README.md

Demonstrates how to import and use the `DeviceFrameset` component to wrap content within a device frame, specifying device type, color, and orientation. Requires importing the `marvel-devices.min.css` stylesheet.

```tsx
import { DeviceFrameset } from 'react-device-frameset'
import 'react-device-frameset/styles/marvel-devices.min.css'

export const App = () => {
    return (
        <DeviceFrameset device="iPhone 8" color="gold" landscape>
            <div>Hello world</div>
        </DeviceFrameset>
    )
}
```

--------------------------------

### Displaying Pre-formatted Text in React JSX

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset-example/pages/legal$.mdx

This React JSX snippet shows how to render pre-formatted text, ensuring that line breaks and white space are preserved. The `whiteSpace: 'pre-line'` style property is used to achieve this effect, making it suitable for displaying content like license agreements or code blocks.

```React
<div style={{ whiteSpace: 'pre-line' }}>\n    {LICENSE}\n</div>
```

--------------------------------

### Using DeviceSelector to Render Dynamic Device Frames

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset/README.md

Illustrates how to integrate the `DeviceSelector` component to allow users to choose a device frame dynamically. It imports both `DeviceFrameset` and `DeviceSelector` along with their respective styles, then uses `DeviceSelector`'s render prop to pass the selected device properties to `DeviceFrameset`.

```tsx
import { DeviceFrameset, DeviceSelector } from 'react-device-frameset'
import 'react-device-frameset/styles/marvel-devices.min.css'
import 'react-device-frameset/styles/device-selector.min.css'

export const App = () => {
    return (
        <DeviceSelector>
            {props => <DeviceFrameset {...props} />}
        </DeviceSelector>
    )
}
```

--------------------------------

### Using DeviceSelector Component

Source: https://github.com/zheeeng/react-device-frameset/blob/main/README.md

Illustrates how to use the `DeviceSelector` component to provide a UI for selecting different device frames. It uses a render prop pattern to pass the selected device properties to a `DeviceFrameset` component. Requires importing `marvel-devices.min.css` and `device-selector.min.css`.

```tsx
import { DeviceFrameset, DeviceSelector } from 'react-device-frameset'
import 'react-device-frameset/styles/marvel-devices.min.css'
import 'react-device-frameset/styles/device-selector.min.css'

export const App = () => {
    return (
        <DeviceSelector>
            {props => <DeviceFrameset {...props} />}
        </DeviceSelector>
    )
}
```

--------------------------------

### Basic Usage of DeviceFrameset Component

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset/README.md

Demonstrates how to import and use the `DeviceFrameset` component. It shows importing the component and its required stylesheet, then rendering a simple div inside an 'iPhone 8' frame with a 'gold' color and landscape orientation.

```tsx
import { DeviceFrameset } from 'react-device-frameset'
import 'react-device-frameset/styles/marvel-devices.min.css'

export const App = () => {
    return (
        <DeviceFrameset device="iPhone 8" color="gold" landscape>
            <div>Hello world</div>
        </DeviceFrameset>
    )
}
```

--------------------------------

### DeviceName and DeviceEmulatorProps API Reference

Source: https://github.com/zheeeng/react-device-frameset/blob/main/README.md

Defines the `DeviceName` type, an enumeration of supported device names, and the `DeviceEmulatorProps` type, which specifies properties for a component that allows selecting a device, including options to ban certain devices, provide a render prop for `DeviceFrameset`, and handle value changes.

```APIDOC
type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPhone 5c" | "iPhone 4s" | "Galaxy Note 8" | "Nexus 5" | "Lumia 920" | "Samsung Galaxy S5" | "HTC One" | "iPad Mini" | "MacBook Pro"

type DeviceEmulatorProps = {
    banDevices?: DeviceName[]
    children: (props: DeviceFramesetProps) => React.ReactNode,
    value?: DeviceName,
    onChange?: (deviceName: DeviceName) => void,
}
```

--------------------------------

### Define Device Emulator Types for React Device Frameset

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset/README.md

Defines TypeScript types for `DeviceName` and `DeviceEmulatorProps` used in the `react-device-frameset` library. `DeviceName` specifies supported device models, while `DeviceEmulatorProps` outlines properties for the `DeviceEmulator` component, including optional device bans, children render prop, and change handlers.

```ts
type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPhone 5c" | "iPhone 4s" | "Galaxy Note 8" | "Nexus 5" | "Lumia 920" | "Samsung Galaxy S5" | "HTC One" | "iPad Mini" | "MacBook Pro"

type DeviceEmulatorProps = {
    banDevices?: DeviceName[]
    children: (props: DeviceFramesetProps) => React.ReactNode,
    value?: DeviceFramesetProps,
    onChange?: (deviceConfig: DeviceFramesetProps) => void 
}
```

--------------------------------

### Define Core Types for Device Emulator Props

Source: https://github.com/zheeeng/react-device-frameset/blob/main/README.md

This snippet defines the `DeviceName` type, listing supported device models, and the `DeviceEmulatorProps` interface, which specifies the properties for the `DeviceEmulator` component, including optional devices to ban, children render prop, current value, and change handler.

```TypeScript
type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPhone 5c" | "iPhone 4s" | "Galaxy Note 8" | "Nexus 5" | "Lumia 920" | "Samsung Galaxy S5" | "HTC One" | "iPad Mini" | "MacBook Pro"

type DeviceEmulatorProps = {
    banDevices?: DeviceName[]
    children: (props: DeviceFramesetProps) => React.ReactNode,
    value?: DeviceFramesetProps,
    onChange?: (deviceConfig: DeviceFramesetProps) => void, 
}
```

--------------------------------

### DeviceFramesetProps API Reference

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset/README.md

Defines the union type for `DeviceFramesetProps`, specifying the available device models, their supported colors, and common optional properties like `landscape`, `width`, `height`, and `zoom` for each device type.

```APIDOC
| { device: 'iPhone X', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 8', color: 'black' | 'silver' | 'gold', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 8 Plus', color: 'black' | 'silver' | 'gold', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 5s', color: 'black' | 'silver' | 'gold', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 5c', color: 'white' | 'red' | 'yellow' | 'green' | 'blue', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 4s', color: 'black' | 'silver', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'Galaxy Note 8', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'Nexus 5', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'Lumia 920', color: 'black' | 'white' | 'yellow' | 'red' | 'blue', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'Samsung Galaxy S5', color: 'white' | 'black', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'HTC One', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPad Mini', color: 'black' | 'silver', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'MacBook Pro', width?: number, height?: number, zoom?: number }
```

--------------------------------

### DeviceFramesetProps API Reference

Source: https://github.com/zheeeng/react-device-frameset/blob/main/README.md

Defines the available props for the `DeviceFrameset` component, specifying different device types and their associated color options, along with common properties like `landscape`, `width`, `height`, and `zoom`.

```APIDOC
| { device: 'iPhone X', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 8', color: 'black' | 'silver' | 'gold', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 8 Plus', color: 'black' | 'silver' | 'gold', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 5s', color: 'black' | 'silver' | 'gold', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 5c', color: 'white' | 'red' | 'yellow' | 'green' | 'blue', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPhone 4s', color: 'black' | 'silver', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'Galaxy Note 8', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'Nexus 5', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'Lumia 920', color: 'black' | 'white' | 'yellow' | 'red' | 'blue', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'Samsung Galaxy S5', color: 'white' | 'black', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'HTC One', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'iPad Mini', color: 'black' | 'silver', landscape?: boolean, width?: number, height?: number, zoom?: number }
| { device: 'MacBook Pro', width?: number, height?: number, zoom?: number }
```

--------------------------------

### DeviceSelector Component Types and Props

Source: https://github.com/zheeeng/react-device-frameset/blob/main/packages/react-device-frameset/README.md

Defines the `DeviceName` type, an enumeration of all supported device strings, and the `DeviceEmulatorProps` type, which specifies the properties for the `DeviceSelector` component, including optional `banDevices`, a required `children` render prop, and optional `value` and `onChange` for controlled usage.

```APIDOC
type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPhone 5c" | "iPhone 4s" | "Galaxy Note 8" | "Nexus 5" | "Lumia 920" | "Samsung Galaxy S5" | "HTC One" | "iPad Mini" | "MacBook Pro"

type DeviceEmulatorProps = {
    banDevices?: DeviceName[]
    children: (props: DeviceFramesetProps) => React.ReactNode,
    value?: DeviceName,
    onChange?: (deviceName: DeviceName) => void, 
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.