Device Picker

Installation

npm install device-picker

Usage

import React from 'react';
import { View, DevicePicker } from 'device-picker';
import memoize from 'lodash/memoize';
function MyDevicePicker() {
   return (
         <DevicePicker
            allowOrphan={true}
            initialDevice={'iPhone'}
            initialView={View.Grid}
            fetchHierarchy={() =>
               fetch(
                  'https://www.cominor.com/api/2.0/wikis/CATEGORY?display=hierarchy',
               ).then(response => response.json())
            }
            fetchChildren={
                memoize(title =>
                    fetch(
                        `https://www.cominor.com/api/2.0/wikis/CATEGORY/${title}/children`,
                    ).then(response => response.json()),
                )
            }
            onSubmit={title => alert(`Selected "${title}"`)}
            onCancel={() => alert(`Cancelled`)}
            objectName="device"
         />
   );
}

export default MyDevicePicker;

Props

| Prop | Type | Default | Required | Description | |----------------|----------|-------------|----------|-----------------------------------------------------------------------------------------------------------------------| | allowOrphan | boolean | false | No | | | initialDevice | string | '' | No | Default device to load picker with. | | initialView | View | View.Grid | No | Default layout for displaying devices. Available options View.Grid, View.Column. For IE defaults to View.Column | | fetchHierarchy | function | undefined | Yes | Function to get devices categories | | fetchChildren | function | undefined | Yes | Function to get category items | | onSubmit | function | undefined | Yes | Function that receives the device title. | | onCancel | function | undefined | Yes | Function when picker is cancelled. | | objectName | string | device | No | Singular object name for objects, usually "Device" or "Category". |

Sample Integration

• Standalone App demonstrating device picker.
• WordPress Block Editor Integration using device picker to attach device to campaign banner

Contributing

Local development setup

Clone repo

git clone https://github.com/iFixit/device-picker.git

Change directory

cd device-picker

Install dependencies

npm install

Start dev server

npm run dev