@accessible/disclosure
This package has moved to<Collapse>
npm i @accessible/collapse
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
Check out the example on CodeSandbox
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>
)
}
LICENSE
MIT