Collapse

Introduction

The Collapse element shows and hides content with a built-in slide in/out animation. You might use this to create a panel of settings for your application, with sub-sections that can be expanded and collapsed.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

I am an open Collapse component. Edit the code to change my state.
Edit code

Usage

Collapse is stateless — whether it is open or closed is determined by the isOpen prop. The following example shows how to combine it with a Button to control its state.

1import { useState } from "react";
2import { Collapse } from "@commure/components-foundation";
3
4const CollapseExample = (props) => {
5  const [isOpen, setIsOpen] = useState(false);
6
7  return (
8    <div>
9      <Button onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}>
10        {isOpen ? "Hide" : "Show"}
11      </Button>
12      <Collapse isOpen={isOpen}>
13        Dummy text.
14      </Collapse>
15    </div>
16  );
17}
18
19export CollapseExample;

API Reference

Collapse

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
component	false	React.ReactType	Component to render as the root element. Useful when rendering a `Collapse` inside a `<table>`, for instance.
isOpen	false	boolean	Whether the component is open or closed.
keepChildrenMounted	false	boolean	Whether the child components will remain mounted when the `Collapse` is closed. Setting to true may improve performance by avoiding re-mounting children.
transitionDuration	false	number	The length of time the transition takes, in milliseconds. This must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.

Related Reading

Blueprint Reference