# Drawer

### Example

The example below uses the Launcher component to pass in drawer state. You can replace this with your own custom button/action if you'd like.

{% code title="Drawer.jsx" %}

```jsx
import React from 'react';
import { Launcher, Drawer } from 'q3-ui-cart'; 

export default () => (
  <Launcher>
    {(close, isOpen) => (
      <Drawer
        checkoutPath="/checkout"
        close={close}
        isOpen={isOpen}
        shopPath="/shop"
        titleKey="title"                  
      >
        <LineItem />
      </Drawer>
    )}
  </Launcher>
);
```

{% endcode %}

### API

| Prop           | Description                                                                                                                                                        | Type        |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
| `checkoutPath` | Relative link for the checkout button.                                                                                                                             | `string*`   |
| `children`     | Nodes to render inside the Drawer's body container.                                                                                                                | `node*`     |
| `close`        | The callback function that executes when a user clicks the Drawer's back button.                                                                                   | `function*` |
| `isOpen`       | Controls the open state of the drawer.                                                                                                                             | `boolean*`  |
| `shopPath`     | Relative link for the products button.                                                                                                                             | `string*`   |
| `titleKey`     | The path (dot notation) to the title within the cart's state. This will default to  "Shopping cart" if either `titleKey` or the `updateOrder` resolver is missing. | `string`    |