@commercetools-uikit/collapsible
    TypeScript icon, indicating that this package has built-in type declarations

    12.2.2 • Public • Published

    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 React from '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;

    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

    Install

    npm i @commercetools-uikit/collapsible

    DownloadsWeekly Downloads

    655

    Version

    12.2.2

    License

    MIT

    Unpacked Size

    13.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar