@commercetools-uikit/collapsible

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

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

Usage

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;

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.	✅		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.

Signatures

Signature children

(options: { isOpen: boolean; toggle?: TToggleCallback }) => ReactNode;

Signature onToggle

(toggleState?: boolean) => void