Skip to content

appleple/react-device-mode

Repository files navigation

react-device-mode

Install

$ npm install react-device-mode --save

Usage

<ReactDeviceMode
  src={src}
  i18n={{ fitWindow: '画面サイズにあわせる' }}
  onClose={() => {}}
  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.