@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.
34 lines (26 loc) • 2.97 kB
Markdown
# Collapse
To implement Collapse component into your project you'll need to add the import:
```jsx
import Collapse from "@kiwicom/orbit-components/lib/Collapse";
```
After adding import into your project you can use it simply like:
```jsx
<Collapse label="Duration">
<Slider defaultValue={5} onChange={value => doSomething(value)} />
</Collapse>
```
## Props
Table below contains all types of the props available in the Collapse component.
| Name | Type | Default | Description |
| :------------------ | :---------------------------------- | :------ | :---------------------------------------------------------------------------------------------------------------------- |
| actions | `React.Node` | | Actions which will be render next to arrow. |
| **children** | `React.Node` | | The children that should be collapsed. |
| id | `string` | | Set `id` for `Collapse`. |
| dataTest | `string` | | Optional prop for testing purposes. |
| expanded | `boolean` | | Passing `true` or `false` makes Collapse a controlled component, requiring you to manage its state via `onClick`. |
| initialExpanded | `boolean` | `false` | If `true` the Collapse component will be expanded on the initial render. To be used when the component is uncontrolled. |
| label | `string` | | The rendered label of the Collapse. See accessibility tab. |
| customLabel | `React.Node` | | Allows for rendering any component as a label. See accessibility tab. |
| onClick | `(event, state) => void \| Promise` | | Callback for handling onClick event. |
| expandButtonLabel | `string` | | Required prop for accessible label of the button when the content is collapsed. See accessibility tab. |
| collapseButtonLabel | `string` | | Required prop for accessible label of the button when the content is expanded. See accessibility tab. |