https://github.com/appleple/react-device-mode

https://github.com/appleple/react-device-mode

component npm react

Last synced: 9 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/appleple/react-device-mode
• Owner: appleple
• License: mit
• Created: 2018-09-12T07:34:17.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-04-12T07:46:58.000Z (over 2 years ago)
• Last Synced: 2024-04-14T02:44:15.620Z (about 2 years ago)
• Topics: component, npm, react
• Language: JavaScript
• Size: 1.73 MB
• Stars: 4
• Watchers: 6
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-device-mode

![](./screenshot.png)

# Install

```sh

$ npm install react-device-mode --save

```

# Usage

```js

 {}}

  devices={[

    {

      name: 'PC',

      ua: 'none',

      width: window.innerWidth - 100,

      height: window.innerHeight - 300,

      resizable: true

    },

    {

      name: 'iPhone 6/7/8',

      ua: 'Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',

      width: 375,

      height: 667,

      resizable: false

    },

  ]}

/>);

```

# Options

|Name|Default|Description|

| ------ |---|---|

| src | - | Set the URL of the page you want to display. |

| defaultDevice | - | First, set the device to be displayed. |

| devices | - | Set the device information that can be displayed. |

| hasHstoryDevice | true | Saves the most recently used device method　in local storage. |

| historyDeviceKey | 'reactDeviceModeHistory' | Set the local storage key. |

| hasCloseBtn | true | Sets the display of the close button. |

| isLoading | false | Set loading display. |