yarn add @faceless-ui/collapsibles
To create a new collapsible, wrap any section of your app with a <Collapsible>
component. This does not render anything to the DOM and provides context for the other components to work together. Then render a <CollapsibleContent>
component anywhere within this to have its height animated from 0
to auto
on toggle. The easiest way to toggle a collapsible is with the <CollapsibleToggler>
component.
import React from 'react'; import { Collapsible, CollapsibleToggler, CollapsibleContent } from '@faceless-ui/collapsibles'; export const MyComponent = () => { return ( <Collapsible> <CollapsibleToggler> ... </CollapsibleToggler> <CollapsibleContent> ... </CollapsibleContent> </Collapsible> ) }
Pro tip: set the openOnInit
prop to have the collapsible open on first render.
To create an accordion-like experience, wrap any number of collapsibles with the <CollapsibleGroup>
component. When a collapsible is rendered inside a group it becomes partially controlled by that group. Set allowMultiple
to false to have the group close all other collapsibles when one opens.
import React from 'react'; import { CollapsibleGroup, Collapsible } from '@faceless-ui/collapsibles'; export const MyComponent = () => { return ( <CollapsibleGroup> <Collapsible openOnInit> ... </Collapsible> <Collapsible> ... </Collapsible> </CollapsibleGroup> ) }
The open and animations are handled by React Animate Height. To customize the transition, use the transTime
and transCurve
props.
<Collapsible transTime={250} transCurve="ease-in" > ... </Collapsible>
Set these props on a <CollapsibleGroup>
to standardize the timing of all instances of <Collapsible>
within that group.
<CollapsibleGroup transTime={250} transCurve="ease-in" > <Collapsible> ... </Collapsible> <Collapsible> ... </Collapsible> </CollapsibleGroup>