@squiz/xaccel-collapsible NPM

Collapsible

Description

A component that provides a header which a user can interact with to toggle the visibility of its respective collapsible body/content.

Properties

Property	Property description	Property type	Is required
`id`	Unique ID	string	x
`children`	Content	ReactNode[]	x
`isOpen`	Toggle the starting visibility of body content	boolean
`isDisabled`	Toggle the ability to show/hide body content	boolean
`onClick`	Callback function run against the Unique ID when the header is clicked	function
`className`	Overwrite ClassName	classNameOverride

Collapsible Header

Properties

Property	Property description	Property type	Is required
`children`	Header Content	ReactNode[]	x
`titleLevel`	Heading Level to use (1–6)	string
`className`	Overwrite ClassName	classNameOverride

Collapsible Body

Properties

Property	Property description	Property type	Is required
`children`	Body Content	ReactNode[]	x
`transitionLength`	Duration of the open/close transition (in milliseconds)	number
`className`	Overwrite ClassName	classNameOverride

Usage

import { Collapsible, CollapsibleHeader, CollapsibleBody } from '@squiz/xaccel-collapsible';

<Collapsible id="12345" isOpen="true" isDisabled="false" onClick={() => { /* ... */ }}>
    <CollapsibleHeader titleLevel="h3">Header</CollapsibleHeader>
    <CollapsibleBody transitionLength={250}>TestBody</CollapsibleBody>
</Collapsible>

For more information about className please visit packages/utility/functions/src/generateClasses.js

react react-dom react-transition-group @squiz/xaccel-prop-types @squiz/xaccel-dynamic-heading @squiz/xaccel-utility-functions

@everything-registry/sub-chunk-861 @squiz/xaccel-component-library

12 months ago

12 months ago

1 year ago

1 year ago