# Collapsible
## Description
A render-prop component to manage a toggle state. The component can be controlled or uncontrolled, depending if the `isClosed` props is defined or not. A controlled component additionally requires the `onToggle` prop.
## Installation
```
pnpm add @commercetools-uikit/collapsible
```
```
npm --save install @commercetools-uikit/collapsible
```
Additionally install the peer dependencies (if not present)
```
pnpm add react
```
```
npm --save install react
```
## Usage
```jsx
import Collapsible from '@commercetools-uikit/collapsible';
const Example = () => (
{({ isOpen, toggle }) => (
Status: {isOpen ? 'open' : 'closed'}
)}
);
export default Example;
```
## Properties
| Props | Type | Required | Default | Description |
| ----------------- | ---------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `isDefaultClosed` | `boolean` | | `false` | This is only used to initialize the `isOpen` state once, when the component mounts.
Therefore there should not be any `componentWillReceiveProps` to update the state
from an external source. |
| `children` | `Function` [See signature.](#signature-children) | ✅ | | A render-prop function.
`children` will be called with `options: { isOpen: boolean; toggle: TToggleCallback }`
`options.toggle` will be defined given that Collapsible is a controlled component. |
| `isClosed` | `boolean` | | | Passing this prop makes the component a controlled component.
Controlled components also require to pass a `onToggle` callback function. |
| `onToggle` | `Function` [See signature.](#signature-ontoggle) | | | A callback function, called when the consumer calls the `toggle` function.
This function is only required when the component is controlled. |
## Signatures
### Signature `children`
```ts
(options: { isOpen: boolean; toggle?: TToggleCallback }) => ReactNode;
```
### Signature `onToggle`
```ts
(toggleState?: boolean) => void
```