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