@paprika/collapsible

@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