@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