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.
yarn add @commercetools-uikit/collapsible
npm --save install @commercetools-uikit/collapsible
Additionally install the peer dependencies (if not present)
yarn add react
npm --save install react
import Collapsible from '@commercetools-uikit/collapsible';
const Example = () => (
<Collapsible>
{({ isOpen, toggle }) => (
<div>
<div>Status: {isOpen ? 'open' : 'closed'}</div>
<button onClick={toggle}>Toggle</button>
</div>
)}
</Collapsible>
);
export default Example;
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. |
✅ | 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. |
A callback function, called when the consumer calls the toggle function.
This function is only required when the component is controlled. |
(options: { isOpen: boolean; toggle?: TToggleCallback }) => ReactNode;
(toggleState?: boolean) => void