duet-ui

Vertical controls for the iPhone Duo.

A React library that approximates the Duo's native side controls.

9:41

strip mode. Added to the Home Screen, the app owns the display and iOS gives it the strip. Duet draws its controls there, like a native app.

Integrate

Wrap your app and pass your tabs. useDuet() also reports the device, the browser and whether the page runs from the Home Screen.

import { Duet } from "duet-ui";

<Duet tabs={{ items: TABS, selected: tab, onSelect: setTab }}>
  <App />
</Duet>
Read the docsPanes example

Where the controls go

Duet picks one of three places from the device, the browser and the window.

Home Screen

Strip

In the strip iOS gives the app, beside the page.

Safari

Column

In the empty part of Safari's column. The page keeps its full width.

Everywhere else

Inline

A slim strip in the page, on the side the reader drags it to.