@paprika/collapsible

Description

Collapsible component, allows the user to expand and collapse some enclosed content.

Installation

yarn add @paprika/collapsible

or with npm:

npm install @paprika/collapsible

Props

Collapsible

| Prop | Type | required | default | Description | | ---------------------- | ------------------ | -------- | ------------------ | --------------------------------------------------------------------------------------------------- | | a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. | | children | node | false | null | Body content of the collapsible. | | iconAlign | [ "left", "right"] | false | "left" | Set's icon alignment left or right. | | iconCollapse | node | false | | Sets RightArrowIcon if true. | | iconExpand | node | false | | Sets DownArrowIcon if true. | | isCollapsed | bool | false | true | State of the collapsible. | | isDisabled | bool | false | false | If the collapsible is disabled. | | hasOnlyIconToggle | bool | false | false | | | label | node | true | - | Sets the label that will display in the collapsible | | onClick | func | false | () => {} | Callback to be executed when the button is clicked or activated by keyboard. | | triggerAriaDescribedby | string | false | null | aria-describedby on the trigger element. |

Usage

import Collapsible from "@paprika/collapsible";

const [isCollapsed, setIsCollapsed] = React.useState(false);

const yourComponent = () => {
  return (
    <Collapsible
      a11yText="collapsible section"
      isCollapsed={isCollapsed}
      isDisabled={false}
      label="Click me to show/hide the content"
      iconAlign="left"
      onClick={() => setIsCollapsed(!isCollapsed)}
    >
      <p>
        <strong>Content</strong> – children of the &lt;Collapsible&gt; is hidden while the collapsible is collapsed, and
        visible with it is expanded.
      </p>
    </Collapsible>
  );
};

export default yourComponent;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG