@accessible/collapse NPM

This package has moved to @accessible/disclosure

An accessible and versatile collapsible component for React

Features

Style-agnostic You can use this component with the styling library of your choice. It works with CSS-in-JS, SASS, plain CSS, plain style objects, anything!
Portal-friendly The collapse target will render into React portals of your choice when configured to do so.
a11y/aria-compliant This component works with screen readers out of the box and manages focus for you.

Quick Start

import {Collapse, Target, Trigger, Close} from '@accessible/collapse'

const Component = () => (
  <Collapse>
    <Trigger>
      <button>Open me</button>
    </Trigger>

    <Target>
      <div className="my-collapse">
        <Close>
          <button>Close me</button>
        </Close>
      </div>
    </Target>
  </Collapse>
)

API

Components

Component	Description
`<Collapse>`	This component creates the context for your collapse target and trigger and contains some configuration options.
`<Target>`	This component wraps any React element and turns it into a collapse target.
`<Trigger>`	This component wraps any React element and turns it into a collapse trigger.
`<Close>`	This is a convenience component that wraps any React element and adds an onClick handler to close the collapse.

Hooks

Hook	Description
`useCollapse()`	This hook provides the value of the collapse's CollapseContextValue object.
`useControls()`	This hook provides access to the collapse's `open`, `close`, and `toggle` functions.
`useIsOpen()`	This hook provides access to the collapse's `isOpen` value.

`<Collapse>`

This component creates the context for your collapse target and trigger and contains some configuration options.

Props

Prop	Type	Default	Required?	Description
defaultOpen	`boolean`	`false`	No	This sets the default open state of the collapse. By default the collapse is closed.
open	`boolean`	`undefined`	No	You can control the open/closed state of the collapse with this prop. When it isn't undefined, this value will take precedence over any calls to `open()`, `close()`, or `toggle()`.
onChange	`(open: boolean) => void`	`undefined`	No	This callback is invoked any time the `open` state of the collapse changes.
id	`string`	`undefined`	No	By default this component creates a unique id for you, as it is required for certain aria attributes. Supplying an id here overrides the auto id feature.
children	React.ReactNode \| React.ReactNode[] \| JSX.Element \| ((context: CollapseContextValue) => React.ReactNode)	`undefined`	No	Your collapse contents and any other children.

`<Target>`

This component wraps any React element and turns it into a collapse target.

Props

Prop	Type	Default	Required?	Description
portal	boolean \| string	`false`	No	When `true` this will render the collapse into a React portal with the id `#portals`. You can render it into any portal by providing its query selector here, e.g. `#foobar`, `[data-portal=true]`, or `.foobar`.
closeOnEscape	`boolean`	`true`	No	By default the collapse will close when the `Escape` key is pressed. You can turn this off by providing `false` here.
closedClass	`string`	`undefined`	No	This class name will be applied to the child element when the collapse is `closed`.
openClass	`string`	`"collapse--open"`	No	This class name will be applied to the child element when the collapse is `open`.
closedStyle	`React.CSSProperties`	`undefined`	No	These styles will be applied to the child element when the collapse is `closed` in addition to the default styles that set the target's visibility.
openStyle	`React.CSSProperties`	`undefined`	No	These styles name will be applied to the child element when the collapse is `open` in addition to the default styles that set the target's visibility.
children	`React.ReactElement`	`undefined`	Yes	The child is cloned by this component and has aria attributes injected into its props as well as the events defined above.

Example

<Target>
  <div className="alert">Alert</div>
</Target>

// <div
//   class="alert"
//   aria-collapse="false"
//   id="collapse--12"
//   style="visibility: hidden;"
// >
//   Alert
// </div>

`<Trigger>`

This component wraps any React element and adds an onClick handler which toggles the open state of the collapse target.

Props

Prop	Type	Default	Required?	Description
closedClass	`string`	`undefined`	No	This class name will be applied to the child element when the collapse is `closed`.
openClass	`string`	`undefined`	No	This class name will be applied to the child element when the collapse is `open`.
closedStyle	`React.CSSProperties`	`undefined`	No	These styles will be applied to the child element when the collapse is `closed`.
openStyle	`React.CSSProperties`	`undefined`	No	These styles name will be applied to the child element when the collapse is `open`.
children	`React.ReactElement`	`undefined`	Yes	The child is cloned by this component and has aria attributes injected into its props as well as the events defined above.

<Trigger on="click">
  <button className="my-button">Open me!</button>
</Trigger>

// <button
//   class="my-button"
//   aria-controls="collapse--12"
//   aria-expanded="false"
// >
//   Open me!
// </button>

`<Close>`

This is a convenience component that wraps any React element and adds an onClick handler which closes the collapse.

Props

Prop	Type	Default	Required?	Description
children	`React.ReactElement`	`undefined`	Yes	The child is cloned by this component and has aria attributes injected into its props as well as the events defined above.

<Close>
  <button className="my-button">Close me</button>
</Close>

// <button
//   class="my-button"
//   aria-controls="collapse--12"
//   aria-expanded="false"
// >
//   Close me
// </button>

`useCollapse()`

This hook provides the value of the collapse's CollapseContextValue object

Example

const Component = () => {
  const {open, close, toggle, isOpen} = useCollapse()
  return <button onClick={toggle}>Toggle the collapse</button>
}

`CollapseContextValue`

interface CollapseContextValue {
  isOpen: boolean
  open: () => void
  close: () => void
  toggle: () => void
  id: string
}

`useControls()`

This hook provides access to the collapse's open, close, and toggle functions

Example

const Component = () => {
  const {open, close, toggle} = useControls()
  return (
    <Target>
      <div className="my-collapse">
        <button onClick={close}>Close me</button>
      </div>
    </Target>
  )
}

`useIsOpen()`

This hook provides access to the collapse's isOpen value

Example

const Component = () => {
  const isOpen = useIsOpen()
  return (
    <Target>
      <div className="my-collapse">Am I open? {isOpen ? 'Yes' : 'No'}</div>
    </Target>
  )
}