#Collapsibles Setup

#Installation

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.

#Collapsible Group

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>
  )
}

#Transitions

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>