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

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 | FunctionSee 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 | FunctionSee 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