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

    1.0.3 • 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

    | { 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?

    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>
        )
    }

    Install

    npm i react-device-frameset@1.0.3

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    1.15 MB

    Total Files

    34

    Last publish

    Collaborators

    • zheeeng