@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
44 lines (34 loc) • 3.89 kB
Markdown
# Drawer
To implement Drawer component into your project you'll need to add the import:
```jsx
import Drawer from "@kiwicom/orbit-components/lib/Drawer";
```
After adding import into your project you can use it simply like:
```jsx
<Drawer shown>Content to show</Drawer>
```
## Props
Table below contains all types of the props available in the Drawer component.
| Name | Type | Default | Description |
| :------------ | :---------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------ |
| actions | `React.Node` | | Actions, especially Buttons, that will be rendered in the Drawer's header. |
| **children** | `React.Node` | | The content of the Drawer. |
| dataTest | `string` | | Optional prop for testing purposes. |
| id | `string` | | Sets the `id` attribute for the `Drawer`. |
| noPadding | `boolean` | `false` | If `true`, the wrapper won't have any inner padding. |
| onClose | `() => void \| Promise` | | Function for handling the onClose event. |
| position | [`enum`](#enum) | `"right"` | The side on which the Drawer should appear. |
| shown | `boolean` | `"true"` | If `true`, the Drawer will be visible; otherwise, it will be visually hidden but will stay in the DOM. |
| suppressed | `boolean` | `false` | If `true`, the Drawer will have a cloudy background. |
| title | `string` | | Title of the Drawer that will be rendered in the Drawer's header. If `ariaLabel` is undefined, this will be used as `aria-label`. |
| triggerRef | `React.RefObject` | | The ref to the element which triggers the Drawer. When the Drawer is closed, focus will return to this element. |
| width | `string` | `"320px"` | The width of the Drawer. |
| lockScrolling | `boolean` | `true` | Whether to prevent scrolling of the rest of the page while Drawer is open. This is on by default to provide a better user experience. |
| fixedHeader | `boolean` | | If `true`, the DrawerHeader will be fixed to the top. |
| labelHide | `string` | `Hide` | Label for the close button. |
| ariaLabel | `string` | | Optional prop for `aria-label`. |
### enum
| position |
| :-------- |
| `"right"` |
| `"left"` |