https://github.com/kimolalekan/react-device-frame
Preview website on a device
https://github.com/kimolalekan/react-device-frame
component css device frame html javascript macbook phone react reactjs
Last synced: about 1 month ago
JSON representation
Preview website on a device
- Host: GitHub
- URL: https://github.com/kimolalekan/react-device-frame
- Owner: kimolalekan
- License: mit
- Created: 2017-08-30T11:38:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-02-02T06:07:58.000Z (about 1 year ago)
- Last Synced: 2025-03-12T22:37:57.890Z (about 1 month ago)
- Topics: component, css, device, frame, html, javascript, macbook, phone, react, reactjs
- Language: JavaScript
- Homepage: http://device.kraftkin.com/
- Size: 11.7 MB
- Stars: 27
- Watchers: 2
- Forks: 12
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## React Device Frame
This 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 <Dock> component to put your <Device> frame in and allows you to load whatever you want to into the <Device> through props.show or as <Device>{children}</Device>
Preview: none yet...dev folder soon, [storybook](https://github.com/storybookjs/storybook) later.
**Supported devices**
- iPhone X (Silver)
- iPhone 8 (Silver, Gold and Black)
- iPhone 8 Plus (Silver, Gold and Black)
- iPhone 5S (Silver, Gold and Black)
- iPhone 5C (White, Red, Yellow, Green and Blue)
- iPhone 4S (Silver, Gold and Black)
- iPad (White and Black)
- MacBook Pro
- Samsung Galaxy S5
- Samsung Galaxy Note 8
- HTC one
- Nexus 5
- Lumia 920 (White, Red, Yellow, Black and Blue)
**Installation... npm? not yet.**
... no npm package for this version, **so you can’t do this**:
```bash
npm i react-device-frame --save
```
**Installation... for now.**
clone the project into a subfolder of your [CRA](https://github.com/facebook/create-react-app ) project. I like `src/lib/`.
```bash
cd your/CRA-project-folder/src
mkdir lib && cd lib
git clone https://github.com/perfectcube/react-device-frame.git
```
Drop this into your `src/jsconfig.json` file:
```json
{
...
"compilerOptions": {
"baseUrl": "src",
"paths": {
"": ["src/"]
}
}
...
}
```
... and you're off to the races!
**Usage**
```jsx
import React, { Component } from "react";
import Device from "lib/react-device-frame";
class ShowWebpage extends Component {
render() {
// 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:
// Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
// Try one of these instead: http://mentalfloss.com/article/53792/17-ancient-abandoned-websites-still-work ... Maybe learn Klingon? https://www.kli.org/
return ;
}
}
class ShowComponents extends Component {
render() {
const content = (
this is content
wahtever you want to have in here is fine
I'm a custom component
);
return ;
}
}
class ShowComponentsAsChildren extends Component {
render() {
return (
this is content
wahtever you want to have in here is fine
I'm a custom component
);
}
}
class SpiffyMobileDevicesDock extends Component {
updatePreview(data){
console.log({
'got update from ':data
});
}
render() {
const content = (
this is content
wahtever you want to have in here is fine
I'm a custom component
);
return (
{
this.updatePreview(update);
}}
hide={['ipad','macbook-pro']}
padTop={55}
orientation="protrait"
>
{content}
);
}
}
```
**<Device> Properties**
| Property | Value | Type |
| ----------- | ------------------------------------------------------------ | ---------------------------------- |
| 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 |
| 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 |
| show | A url or any <Component>. Show is optional but <Device> won’t show anything unless you declare show={something} or give <Device><p>a child</p></Device>. Note that we don’t check if you're passing in a valid url... enjoy! | string
component
undefined |
| orientation | one of **protrait** or **landscape**. | string |
| title | Only used as the title attribute in the <iframe> if props.show is a url | string |
**<Dock> Properties**
| Property | Value | Type |
| -------- | ------------------------------------------------------------ | -------- |
| device | **(required)** The initially selected device in the device switcher pulldown | string |
| view | (**required**) The zoom level that you want to show the device at. One of 'full', 'large', 'med', or 'small'. | string |
| close | **(optional)** The text on the dock close button | string |
| open | **(optional)** The text on the dock open button | string |
| zoom | **(optional)** The text on the zoom selector options. The default values are:
{
full: "Huge",
large: "Large",
med: "Medium",
small: "Small",
} | object |
| 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
• zoom {string} one of: 'full','large','med','small'. this is the currently selected zoom level.
• device {string} one of Device.SUPPORTED_DEVICES, like: "the-device-slug"
• orient {string} "landscape" or "portrait"
• color {string} the currently selected human readable color name. Map this to the #hex color for the with Device.colorMap('device-type','color')
• float {string} "right" or "left" | function |
| hide | (**optional**) An array of devices to remove from the device selector pulldown. For example, if you wanted to only show phones in the 's device selection pulldown you'd do this: hide={['macbook-pro','ipad']}. See: › Properties › use for valid values. | array |
| show | (**optional**) Let’s you turn off visual elements within the <Dock/>. You have these options, **bold** is default:
• zoom: [**true** \| false] The device zoom pulldown
•switcher: [**true** \| false] The device frame switcher pulldown
•color: [**true** \| false] The color selector
•float: [**true** \| false] The drawer position button
orientation: [true \| false] -- not implimeted yet.
Example:
show={{color:false}}
This would hide the color selection menu for all devices. | object |
| 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 |
| tooltip | (**optional**) Shows a <ReactTooltip> for the <Dock> open button if you pass in a string. | string |
LICENSE: **MIT**
**Developer:** [Dan Bryant](https://github.com/cube-dan). **Original Author:** [Olalekan Animashaun](https://kimolalekan.github.io)