# UI Tray

The UI tray can be used with and without React. The basic HTML structure is shown below:

```html
<!-- Tray -->
<div class="ui-tray ui-position--fill ui-position--fixed">
  <!-- Backdrop -->
  <div
    class="ui-tray__backdrop ui-position--fill ui-position--absolute ui-cursor--pointer"
  ></div>

  <!-- Close Icon -->
  <span
    class="ui-tray__close ui-icon ui-icon--close ui-scale ui-scale--1 ui-color--paper-darkest ui-position--fixed ui-position--upper-right ui-p--1 ui-cursor--pointer"
  ></span>

  <div class="ui-tray__container ui-tray__container--position-right">
    <div class="ui-tray__content ui-p--3">Scrollable Tray Content</div>
  </div>
</div>
```

It is recommended you use the React component:

```javascript
import { Tray, TrayControls } from '@dollarshaveclub/ui/components/Tray'

function UncontrolledTrayExample() {
  return (
    <TrayControls>
      {({ open }) => (
        <div>
          <Tray position="left">My Tray Content!</Tray>
          <button className="ui-btn ui-btn__primary" onClick={() => open()}>
            Open
          </button>
        </div>
      )}
    </TrayControls>
  )
}
```

You may wish to maintain Tray state yourself. You can do so by not wrapping it within TrayControls and just provide an `isOpen` prop.

```javascript
import { Tray } from '@dollarshaveclub/ui/components/Tray'

function ControlledTrayExample() {
  return (
    <div>
      <Tray isOpen={this.state.isTrayOpen} position="left">
        My Tray Content!
      </Tray>
      <button
        className="ui-btn ui-btn__primary"
        onClick={() => this.setState({ isTrayOpen: true })}
      >
        Open
      </button>
    </div>
  )
}
```