Demos
For usage examples, visit the component demo page: Collapse
Import
import { Collapse } from '@soroush.tech/design-system/Collapse'Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | What opens and closes. |
isShown | boolean | false | Whether it is open. |
shouldAppear | boolean | true | Moves on the first render too, when open. |
shouldMountOnEnter | boolean | false | Keeps the content out of the tree until it is first opened. |
shouldUnmountOnExit | boolean | false | Takes the content out of the tree once it is closed. |
timeout | number | { enter, exit } | theme.transitions.duration.standard | How long it takes, in milliseconds. |
easing | keyof Theme['transitions']['easing'] | 'standard' | Which easing of the theme it moves by. |
collapsedSize | string | number | 0 | The height - or width - it keeps when closed. A number is pixels. |
orientation | 'vertical' | 'horizontal' | 'vertical' | Which way it opens. |
onEnter, onEntering, onEntered | (node: HTMLElement) => void | - | Fired before it opens, as it starts to, and when it is open. |
onExit, onExiting, onExited | (node: HTMLElement) => void | - | Fired before it closes, as it starts to, and when it is closed. |
className, data-testid | On the root. |
Time and easing
The time and the easing come from theme.transitions - duration (short, standard, long)
and easing (standard, enter, exit) - so a theme changes how everything moves in one place.
Customization
theme.components.Collapse styles the root (the box whose size moves), the wrapper that holds
the content and is measured, and the inner box. Its defaultProps set orientation,
collapsedSize, timeout, easing and shouldAppear.
Source code
If this page does not answer your question, have a look at the implementation of the component for more detail.