react-device-frameset
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    React Device Frameset

    NPM

    publish workflow pages workflow npm version

    This is yet another device frameset component for React.

    Demo

    Features

    • Powered by pure css device prototype showcase Marvel Devices.css
    • language Type Safe and under maintainable
    • Sample for reference

    frameset-screenshot

    Installation

    yarn add react-device-frameset (or npm)

    Usage

    import { DeviceFrameset } from 'react-device-frameset'
    import 'react-device-frameset/lib/css/marvel-devices.min.css'
    
    export const App = () => {
        return (
            <DeviceFrameset device="iPhone 8" color="gold" landscape>
                <div>Hello world</div>
            </DeviceFrameset>
        )
    }

    Prop Signature

    DeviceFramesetProps:

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

    If you like the frameset selector?

    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, 
    }
    import { DeviceFrameset, DeviceSelector } from 'react-device-frameset'
    import 'react-device-frameset/lib/css/marvel-devices.min.css'
    import 'react-device-frameset/lib/css/device-selector.min.css'
    
    export const App = () => {
        return (
            <DeviceSelector>
                {props => <DeviceFrameset {...props} />}
            </DeviceSelector>
        )
    }

    If you like the frameset emulator?

    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, 
    }
    import { DeviceFrameset, DeviceEmulator } from 'react-device-frameset'
    import 'react-device-frameset/lib/css/marvel-devices.min.css'
    import 'react-device-frameset/lib/css/device-emulator.min.css'
    
    export const App = () => {
        return (
            <DeviceEmulator banDevices={["HTC One"]}>
                {props => <DeviceFrameset {...props} />}
            </DeviceEmulator>
        )
    }

      This feature is exclusive to Teams

      Illustration of wombats

      The package file explorer is only available for Teams at the moment.

      We may support exploring this package in the future. Check back soon.

      Install

      npm i react-device-frameset

      DownloadsWeekly Downloads

      118

      Version

      1.2.0

      License

      MIT

      Unpacked Size

      307 kB

      Total Files

      26

      Last publish

      Collaborators

      • zheeeng