logologo
Faceless UI
Docs

#Collapsibles API

#<Collapsible>

This component provides a new collapsible context to any section of your app. It has no required props and renders nothing in the DOM. This is where the collapsible settings are defined.

import React from 'react';
import { Collapsible } from '@faceless-ui/collapsibles';

export const MyComponent = () => {
  return (
    <Collapsible
      openOnInit
      transTime={250}
      transCurve="linear"
      onToggle={() => { console.log('toggled') }}
      // open={false} NOTE: can also be used to control a collapsible
    >
      ...
    </Collapsible>
  )
}

#<Collapsible> Props

openOnInit
  :  boolean
  |  optional

If true, the collapsible will be open on initial render.

transTime
  :  number
  |  optional

The time in it takes for each collapsible to expand and collapse. Default is 0ms.

transCurve
  :  string
  |  optional

The timing function to use for the animation. Default is linear.

initialHeight
  :  number
  |  optional

The height in pixels to animate to and from. Defaults to 0.

open
  :  boolean
  |  optional

If true, the collapsible will be open. This is a useful pattern to control the collapsible with external state.

onToggle()
  :  method
  |  optional

A callback function that is executed when the collapsible is toggled.

classPrefix
  :  string
  |  optional

Prepends onto onto every generated class name, useful for unique name-spacing within complex stylesheets.

#<Collapsible> Context

isOpen
  :  boolean

The current status of the collapsible.

rootClass
  :  string

The root class for the collapsible. Appends classPrefix to the class name, when defined.

handleClick()
  :  method

Used internally to report the toggle to the nearest <CollapsibleGroup>, if nested.

id
  :  string
  |  optional

A unique ID used to match ARIA attributes between the collapsible components. Defaults to a random string using the useId hook. See accessibility for full details.

...settings

All settings are spread into the context.

#<CollapsibleContent>

The height of this component will be animated from 0 to auto-height content when the collapsible is triggered. This is made possible through react-animate-height. This component has no required props.

import React from 'react';
import { Collapsible, CollapsibleContent } from '@faceless-ui/collapsibles';

export const MyComponent = () => {
  return (
    <Collapsible>
      <CollapsibleContent>
        ...
      </CollapsibleContent>
    </Collapsible>
  )
}

#<CollapsibleContent> Props

htmlElement
  :  string
  |  optional

Customize the HTML element that is rendered in the DOM. Defaults to div.

...rest
  :  object
  |  optional

All other props are spread onto the DOM element as HTML attributes.

#<CollapsibleToggler>

This component renders a button that opens and closes the nearest collapsible when clicked.

import React from 'react';
import { Collapsible, CollapsibleToggler } from '@faceless-ui/collapsibles';

export const MyComponent = () => {
  return (
    <Collapsible>
      <CollapsibleToggler>
        ...
      </CollapsibleToggler>
    </Collapsible>
  )
}

#<CollapsibleToggler> Props

htmlElement
  :  string
  |  optional

Customize the HTML element that is rendered in the DOM. Defaults to button.

...rest
  :  object
  |  optional

All other props are spread onto the DOM element as HTML attributes.

#<CollapsibleGroup>

This component provides a new group context to any section of your app. It has no required props and renders nothing in the DOM. This is where the group settings are defined.

import React from 'react';
import { CollapsibleGroup, Collapsible, CollapsibleContent } from '@faceless-ui/collapsibles';

export const MyComponent = () => {
  return (
    <CollapsibleGroup allowMultiple={false}>
      <Collapsible openOnInit>
        ...
      </Collapsible>
      <Collapsible>
        ...
      </Collapsible>
    </CollapsibleGroup>
  )
}

#<CollapsibleGroup> Props

allowMultiple
  :  boolean
  |  optional

When false, will close all collapsibles in the group when one is opened.

transTime
  :  number
  |  optional

Standardizes all transition times of the collapsibles within the group. Can be overridden on each collapsible with the transTime prop.

transCurve
  :  string
  |  optional

Standardizes all transition curves of the collapsibles within the group. Can be overridden on each collapsible with the transCurve prop.

classPrefix
  :  string
  |  optional

Prepends onto onto every generated class name, useful for unique name-spacing within complex stylesheets.

#<CollapsibleGroup> Context

toggleCount
  :  number

The number of times the group has been toggled. Incremented every time a collapsible is opened or closed.

...settings

All settings are spread into the context.

#Accessibility

This package strictly follows the WAI-ARIA pattern for accordions:

  • <CollapsibleContent> has the following properties:
    • role is region
    • aria-labelledby is equal to the ID of the <CollapsibleToggler>
  • <CollapsibleToggler> is a <button> element with the following properties:
    • type is button
    • aria-expanded is toggled true or false based on isOpen
    • aria-owns is equal to the ID of the <CollapsibleContent>
    • aria-label is "toggle collapsible" by default

NOTE: To match ARIA attributes between DOM elements, a random string is generated using the useId hook. To opt out of this, just pass your own id to the <Collapsible> and it will be used instead.

#TypeScript

All types can be directly imported.

import {
  CollapsibleProps,
  ICollapsibleContext,
  CollapsibleContentProps,
  CollapsibleTogglerProps,
  ICollapsibleGroupContext,
  CollapsibleGroupProps
} from '@faceless-ui/collapsibles/dist/types';
© 2022 — Faceless UI