{"id":26286510,"url":"https://github.com/kimolalekan/react-device-frame","last_synced_at":"2025-05-07T16:23:41.395Z","repository":{"id":25509497,"uuid":"101874110","full_name":"kimolalekan/react-device-frame","owner":"kimolalekan","description":"Preview website on a device  ","archived":false,"fork":false,"pushed_at":"2024-02-02T06:07:58.000Z","size":12241,"stargazers_count":27,"open_issues_count":4,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T09:44:02.338Z","etag":null,"topics":["component","css","device","frame","html","javascript","macbook","phone","react","reactjs"],"latest_commit_sha":null,"homepage":"http://device.kraftkin.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kimolalekan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-30T11:38:29.000Z","updated_at":"2024-12-15T12:20:14.000Z","dependencies_parsed_at":"2022-07-19T18:03:44.142Z","dependency_job_id":null,"html_url":"https://github.com/kimolalekan/react-device-frame","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimolalekan%2Freact-device-frame","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimolalekan%2Freact-device-frame/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimolalekan%2Freact-device-frame/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimolalekan%2Freact-device-frame/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimolalekan","download_url":"https://codeload.github.com/kimolalekan/react-device-frame/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252913523,"owners_count":21824194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","css","device","frame","html","javascript","macbook","phone","react","reactjs"],"created_at":"2025-03-14T20:29:35.564Z","updated_at":"2025-05-07T16:23:41.371Z","avatar_url":"https://github.com/kimolalekan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Device Frame\n\nThis is a rewrite of [Olalekan Animashaun](https://kimolalekan.github.io/#)'s React wrapper for [Devices.css](http://marvelapp.github.io/devices.css/). It adds a snazzy \u0026lt;Dock\u0026gt; component to put your \u0026lt;Device\u0026gt; frame in and allows you to load whatever you want to into the \u0026lt;Device\u0026gt; through props.show or as \u0026lt;Device\u0026gt;{children}\u0026lt;/Device\u0026gt;\n\nPreview: none yet...dev folder soon, [storybook](https://github.com/storybookjs/storybook) later.\n\n**Supported devices**\n\n- iPhone X (Silver)\n\n- iPhone 8 (Silver, Gold and Black)\n\n- iPhone 8 Plus (Silver, Gold and Black)\n\n- iPhone 5S (Silver, Gold and Black)\n\n- iPhone 5C (White, Red, Yellow, Green and Blue)\n\n- iPhone 4S (Silver, Gold and Black)\n\n- iPad (White and Black)\n\n- MacBook Pro\n\n- Samsung Galaxy S5\n\n- Samsung Galaxy Note 8\n\n- HTC one\n\n- Nexus 5\n\n- Lumia 920 (White, Red, Yellow, Black and Blue)\n\n\n**Installation... npm? not yet.**\n\n... no npm package for this version, **so you can’t do this**:\n\n```bash\nnpm i react-device-frame --save\n```\n\n**Installation... for now.**\n\nclone the project into a subfolder of your [CRA](https://github.com/facebook/create-react-app ) project. I like `src/lib/`.\n\n```bash\ncd your/CRA-project-folder/src\nmkdir lib \u0026\u0026 cd lib\ngit clone https://github.com/perfectcube/react-device-frame.git\n```\n\nDrop this into your `src/jsconfig.json` file:  \n\n```json\n{\n  ...\n  \"compilerOptions\": {\n    \"baseUrl\": \"src\",\n    \"paths\": {\n      \"\": [\"src/\"]\n    }\n  }\n  ...\n}\n```\n\n... and you're off to the races!\n\n**Usage**\n\n```jsx\nimport React, { Component } from \"react\";\nimport Device from \"lib/react-device-frame\";\n\nclass ShowWebpage extends Component {\n  render() {\n    // NOTE: You'll have a rough time displaying a website in Chrome that's sending back a 'X-Frame-Options=sameorigin' header. You'll get an error in the console like: \n    // Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.\n    // Try one of these instead: http://mentalfloss.com/article/53792/17-ancient-abandoned-websites-still-work ... Maybe learn Klingon? https://www.kli.org/\n    return \u003cDevice use=\"iphone-8\" color=\"gold\" show=\"https://www.kli.org/\" /\u003e;\n  }\n}\n\nclass ShowComponents extends Component {\n  render() {\n    const content = (\n      \u003cdiv\u003e\n      \t\u003cp\u003ethis is content\u003c/p\u003e\n      \t\u003cp\u003ewahtever you want to have in here is fine\u003c/p\u003e\n      \t\u003cButton\u003eI'm a custom component\u003c/Button\u003e\n      \u003c/div\u003e\n    );\n    return \u003cDevice use=\"iphone-5c\" show={content} color=\"red\" /\u003e;\n  }\n}\n\nclass ShowComponentsAsChildren extends Component {\n  render() {\n    return (\n      \u003cDevice use=\"macbook-pro\"\u003e\n      \t\u003cdiv\u003e\n      \t\t\u003cp\u003ethis is content\u003c/p\u003e\n      \t\t\u003cp\u003ewahtever you want to have in here is fine\u003c/p\u003e\n      \t\t\u003cButton\u003eI'm a custom component\u003c/Button\u003e\n      \t\u003c/div\u003e\n    \t\u003c/Device\u003e\n    );\n  }\n}\n\nclass SpiffyMobileDevicesDock extends Component {\n  \n  updatePreview(data){\n    console.log({\n      'got update from \u003cDock\u003e':data\n    });\n  }\n  \n  render() {\n    \n    const content = (\n      \u003cdiv\u003e\n      \t\u003cp\u003ethis is content\u003c/p\u003e\n      \t\u003cp\u003ewahtever you want to have in here is fine\u003c/p\u003e\n      \t\u003cButton\u003eI'm a custom component\u003c/Button\u003e\n      \u003c/div\u003e\n    );\n    \n    return (\n    \t\u003cDock\n        device=\"iphone-x\" \n        tooltip=\"Show a mobile Preview\" \n        open=\"Mobile Preview\" \n        close=\"Hide Preview\"\n        zoom={{\n          full: \"Huge\",\n          large: \"Large\",\n          med: \"Medium\",\n          small: \"Small\",\n        }}\n        view=\"large\"\n        onData={(update)=\u003e{\n          this.updatePreview(update);\n        }}\n        hide={['ipad','macbook-pro']}\n        padTop={55}\n        orientation=\"protrait\"\n       \u003e\n\t\t\t\t\u003cDevice \n        \tuse=\"iphone-x\"\n          color=\"black\" \n          orientation=\"protrait\"\n         \u003e{content}\u003c/Device\u003e\n       \u003c/Dock\u003e\n    );\n  }\n  \n}\n```\n\n**\u0026lt;Device\u0026gt; Properties**\n\n| Property    | Value                                                        | Type                               |\n| ----------- | ------------------------------------------------------------ | ---------------------------------- |\n| use         | iphone-x, iphone-8, iphone-8plus, iphone-5s, iphone-5c, iphone-4s, ipad-mini, nexus-5, htc-one, galaxy-s5, galaxy-note8, macbook-pro; default is iphone-x | string                             |\n| color       | Depends on the device. Use Device.getColors('device-name') to get all supported colors and use Device.getColor('device-name') to get the device default color. | string                             |\n| show        | A url or any \u0026lt;Component\u0026gt;. Show is optional but \u0026lt;Device\u0026gt; won’t show anything unless you declare show={something} or give \u0026lt;Device\u0026gt;\u0026lt;p\u0026gt;a child\u0026lt;/p\u0026gt;\u0026lt;/Device\u0026gt;. Note that we don’t check if you're passing in a valid url... enjoy! | string\u003cbr/\u003ecomponent\u003cbr/\u003eundefined |\n| orientation | one of **protrait** or **landscape**.                        | string                             |\n| title       | Only used as the title attribute in the \u0026lt;iframe\u0026gt; if props.show is a url | string                             |\n\n**\u0026lt;Dock\u0026gt; Properties**\n\n| Property | Value                                                        | Type     |\n| -------- | ------------------------------------------------------------ | -------- |\n| device   | **(required)** The initially selected device in the device switcher pulldown | string   |\n| view     | (**required**) The zoom level that you want to show the device at. One of 'full', 'large', 'med', or 'small'. | string   |\n| close    | **(optional)** The text on the dock close button             | string   |\n| open     | **(optional)** The text on the dock open button              | string   |\n| zoom     | **(optional)** The text on the zoom selector options. The default values are: \u003cbr/\u003e{\u003cbr/\u003e          full: \"Huge\",\u003cbr/\u003e          large: \"Large\",\u003cbr/\u003e          med: \"Medium\",\u003cbr/\u003e          small: \"Small\",\u003cbr/\u003e} | object   |\n| onData   | **(optional)** A callback that recieves all selected options as a single argument whenever you change an option.  The object you're passed has the following keys\u003cbr /\u003e• zoom {string} one of: 'full','large','med','small'. this is the currently selected zoom level. \u003cbr/\u003e• device {string} one of Device.SUPPORTED_DEVICES, like: \"the-device-slug\"\u003cbr/\u003e• orient {string} \"landscape\" or \"portrait\" \u003cbr/\u003e• color {string} the currently selected human readable color name. Map this to the #hex color for the \u003cDevice/\u003e with Device.colorMap('device-type','color')\u003cbr/\u003e• float {string} \"right\" or \"left\" | function |\n| hide     | (**optional**) An array of devices to remove from the device selector pulldown. For example, if you wanted to only show phones in the \u003cDock\u003e's device selection pulldown you'd do this: hide={['macbook-pro','ipad']}. See: \u003cDevice\u003e › Properties › use for valid values. | array    |\n| show     | (**optional**) Let’s you turn off visual elements within the \u0026lt;Dock/\u0026gt;. You have these options, **bold** is default:\u003cbr/\u003e• zoom: [**true** \\| false] The device zoom pulldown\u003cbr/\u003e•switcher: [**true** \\| false] The device frame switcher pulldown\u003cbr/\u003e•color: [**true** \\| false] The color selector\u003cbr/\u003e•float: [**true** \\| false] The drawer position button \u003cbr/\u003e orientation: [true \\| false] -- not implimeted yet.\u003cbr/\u003eExample:\u003cbr/\u003eshow={{color:false}} \u003cbr/\u003eThis would hide the color selection menu for all devices. | object   |\n| padTop   | (**optional**) A number of pixels that you want to pad the top of the dock down from the top of the window frame. Handy if you're displaying the dock with a header reagion that you don’t want to overlap with the device. | int      |\n| tooltip  | (**optional**) Shows a \u0026lt;ReactTooltip\u0026gt; for the \u0026lt;Dock\u0026gt; open button if you pass in a string. | string   |\n\nLICENSE: **MIT**\n\n**Developer:** [Dan Bryant](https://github.com/cube-dan). **Original Author:** [Olalekan Animashaun](https://kimolalekan.github.io)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimolalekan%2Freact-device-frame","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimolalekan%2Freact-device-frame","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimolalekan%2Freact-device-frame/lists"}