expandable-content.md

ExpandableContent

Source

A collapsible section that reveals its children with a height transition.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { ExpandableContent } from 'chayns-components';

// ...

<ExpandableContent {...} />

Props

The ExpandableContent-component takes the following props:

Name	Type	Default	Required
classNames	{ opening: string, opened: string, closing: string, closed: string }	{ opened: 'animation__accordion--open', opening: 'animation__accordion--open', closed: 'animation__accordion--close', closing: 'animation__accordion--close', }
timeout	{ opening: number, closing: number }	{ opening: DEFAULT_OPEN_TIMEOUT, closing: DEFAULT_CLOSE_TIMEOUT, }
open	boolean		✓
style	{ [key: string]: string | number }
className	string
children	ReactNode | Array<ReactNode>		✓
removeContentClosed	boolean	false

classNames

classNames?: { opening: string, opened: string, closing: string, closed: string }

An object of classname strings that should be applied in the different states.

---

timeout

timeout?: { opening: number, closing: number }

This controls the animation timeouts for opening and closing.

---

open

open: boolean;

Wether the content should be visible. If changed, a height transition will start.

---

style

style?: { [key: string]: string | number }

A React style object that is passed to the wrapper <div>-element.

---

className

className?: string

A classname string that is applied to the wrapper element.

---

children

children: ReactNode | Array<ReactNode>;

The children of the component.

---

removeContentClosed

removeContentClosed?: boolean

Wether the content should be removed when the component is closed and the content would not be visible anyways.