corvu corvu logo
GitHub repository

Disclosure

An interactive component which expands/collapses content.

0.2.1

npm source

Jasmin starred 3 repositories

corvudev/corvu

Features Section titled Features

  • Option to hide the content when collapsed instead of unmounting it for better SEO
  • CSS variables to animate the height/width of the content
  • Full keyboard navigation

Installation Section titled Installation 

npm install @corvu/disclosure

The disclosure is also included in the main corvu package under corvu/disclosure.

Usage Section titled Usage 

import Disclosure from '@corvu/disclosure' // 'corvu/disclosure'
// or
// import { Root, Trigger, Content } from '@corvu/disclosure'

Anatomy Section titled Anatomy 

<Disclosure>
  <Disclosure.Trigger />
  <Disclosure.Content />
</Disclosure>

Animation Section titled Animation

corvu sets the --corvu-disclosure-content-height and --corvu-disclosure-content-width CSS properties on the disclosure content that make it possible to animate the height/width.

[data-corvu-disclosure-content][data-collapsed] {
  animation: collapse 200ms linear;
}
[data-corvu-disclosure-content][data-expanded] {
  animation: expand 200ms linear;
}

@keyframes collapse {
  0% {
    height: var(--corvu-disclosure-content-height);
  }
  100% {
    height: 0px;
  }
}

@keyframes expand {
  0% {
    height: 0px;
  }
  100% {
    height: var(--corvu-disclosure-content-height);
  }
}

Accessibility Section titled Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.

Keyboard navigation Section titled Keyboard navigation

Key Behavior
Space Activates the trigger and toggles the disclosure.
Enter Activates the trigger and toggles the disclosure.

API reference Section titled API reference

<Root />

Component

Section titled Root

Context wrapper for the disclosure. Is required for every disclosure you create.

Props

Property Default Type/Description

expanded

-

boolean

Whether the disclosure is expanded.

onExpandedChange

-

(expanded: boolean) => void

Callback fired when the expanded state changes.

initialExpanded

false

boolean

Whether the disclosure is expanded initially.

collapseBehavior

remove

'remove' | 'hide'

Whether the disclosure content should be removed or hidden when collapsed. Useful if you want to always render the content for SEO reasons.

onContentPresentChange

-

(present: boolean) => void

Callback fired when the disclosure content present state changes.

disclosureId

createUniqueId()

string

The id attribute of the disclosure content element.

contextId

-

string

The id of the disclosure context. Useful if you have nested disclosures and want to create components that belong to a disclosure higher up in the tree.

<Trigger />

Component

Section titled Trigger

Button that changes the open state of the disclosure when clicked.

Props

Property Default Type/Description

as

button

ValidComponent

Component to render the dynamic component as.

contextId

-

string

The id of the disclosure context to use.

Data attributes

Data attributes present on <Trigger /> components.

Property Description

data-corvu-disclosure-trigger

Present on every disclosure trigger element.

data-expanded

Present when the disclosure is expanded.

data-collapsed

Present when the disclosure is collapsed.

<Content />

Component

Section titled Content

Content of a disclosure. Can be animated.

Props

Property Default Type/Description

as

div

ValidComponent

Component to render the dynamic component as.

forceMount

false

boolean

Whether the disclosure content should be forced to render. Useful when using third-party animation libraries.

contextId

-

string

The id of the disclosure context to use.

Data attributes

Data attributes present on <Content /> components.

Property Description

data-corvu-disclosure-content

Present on every disclosure content element.

data-expanded

Present when the disclosure is expanded.

data-collapsed

Present when the disclosure is collapsed.

CSS properties

CSS properties present on <Content /> components.

Property Description

--corvu-disclosure-content-width

The width of the disclosure content. Useful if you want to animate its width.

--corvu-disclosure-content-height

The height of the disclosure content. Useful if you want to animate its height.

useContext

Context

Section titled useContext

Context which exposes various properties to interact with the disclosure. Optionally provide a contextId to access a keyed context.

Returns

Property Type/Description

expanded

Accessor<boolean>

Whether the disclosure is expanded.

setExpanded

Setter<boolean>

Callback fired when the expanded state changes.

collapseBehavior

Accessor<'remove' | 'hide'>

Whether the disclosure content should be removed or hidden when collapsed.

disclosureId

Accessor<string>

The id attribute of the disclosure content element.

contentPresent

Accessor<boolean>

Whether the disclosure content is present. This differes from expanded as it tracks pending animations.

contentRef

Accessor<HTMLElement | null>

The disclosure content element.

contentSize

Accessor<[number, number] | null>

The current size of the disclosure content. Useful if you want to animate width or height. [width, height]

RootChildrenProps

Type

Section titled RootChildrenProps

Props that are passed to the Root component children callback.

Props

Property Type/Description

expanded

boolean

Whether the disclosure is expanded.

setExpanded

Setter<boolean>

Callback fired when the expanded state changes.

collapseBehavior

'remove' | 'hide'

Whether the disclosure content should be removed or hidden when collapsed.

disclosureId

string

The id attribute of the disclosure content element.

contentPresent

boolean

Whether the disclosure content is present. This differes from expanded as it tracks pending animations.

contentRef

HTMLElement | null

The disclosure content element.

contentSize

[number, number] | null

The current size of the disclosure content. Useful if you want to animate width or height. [width, height]

Developed and designed by Jasmin