Skip to main content
Reakit
DocumentationNewsletter
Spectrum
GitHub
GitHub

Disclosure

Accessible Disclosure compoennt that controls visibility of a section of content (DialogContent). It follows the WAI-ARIA Disclosure Pattern.

#Installation

npm install reakit

Learn more in Get started.

#Usage

Content
import {
  useDisclosureState,
  Disclosure,
  DisclosureRegion
} from "reakit/Disclosure";

function Example() {
  const disclosure = useDisclosureState({ visible: true });
  return (
    <>
      <Disclosure {...disclosure}>Toggle</Disclosure>
      <DisclosureRegion {...disclosure}>Content</DisclosureRegion>
    </>
  );
}

#Conditionally rendering

You shouldn't conditionally render the DisclosureRegion component as this will make some Reakit features not work. Instead, you can use render props and conditionally render the underneath element:

import {
  useDisclosureState,
  Disclosure,
  DisclosureRegion
} from "reakit/Disclosure";

function Example() {
  const disclosure = useDisclosureState();
  return (
    <>
      <Disclosure {...disclosure}>Toggle</Disclosure>
      {/* instead of {disclosure.visible && <DisclosureRegion {...disclosure}>Content</DisclosureRegion>} */}
      <DisclosureRegion {...disclosure}>
        {props => disclosure.visible && <div {...props}>Content</div>}
      </DisclosureRegion>
    </>
  );
}

#Multiple components

Each DisclosureRegion component should have its own useDisclosureState. This is also true for derivative modules like Dialog, Popover, Menu, Tooltip etc.

If you want to have only one Disclosure element controling multiple DisclosureRegion components, you can use render props to apply the same state to different Disclosures that will result in a single element.

import {
  useDisclosureState,
  Disclosure,
  DisclosureRegion
} from "reakit/Disclosure";

function Example() {
  const disclosure1 = useDisclosureState();
  const disclosure2 = useDisclosureState();
  return (
    <>
      <Disclosure {...disclosure1}>
        {props => (
          <Disclosure {...props} {...disclosure2}>
            Toggle All
          </Disclosure>
        )}
      </Disclosure>
      <DisclosureRegion {...disclosure1}>Content 1</DisclosureRegion>
      <DisclosureRegion {...disclosure2}>Content 2</DisclosureRegion>
    </>
  );
}

#Accessibility

  • Disclosure extends the accessibility features of Button.
  • Disclosure has a value specified for aria-controls that refers to DisclosureRegion.
  • When DisclosureRegion is visible, Disclosure has aria-expanded set to true. When DisclosureRegion is hidden, it is set to false.

Learn more in Accessibility.

#Composition

Learn more in Composition.

#Props

#useDisclosureState

  • baseId string

    ID that will serve as a base for all the items IDs.

  • visible boolean

    Whether it's visible or not.

  • unstable_animated number | boolean

    If true, animating will be set to true when visible changes. It'll wait for stopAnimation to be called or a CSS transition ends. If it's a number, stopAnimation will be called automatically after given milliseconds.

#Disclosure

  • disabled boolean | undefined

    Same as the HTML attribute.

  • focusable boolean | undefined

    When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

3 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

  • visible boolean

    Whether it's visible or not.

  • baseId string

    ID that will serve as a base for all the items IDs.

  • toggle () => void

    Toggles the visible state

#DisclosureRegion

  • id string | undefined

    Same as the HTML attribute.

4 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

  • baseId string

    ID that will serve as a base for all the items IDs.

  • visible boolean

    Whether it's visible or not.

  • unstable_animated number | boolean

    If true, animating will be set to true when visible changes. It'll wait for stopAnimation to be called or a CSS transition ends. If it's a number, stopAnimation will be called automatically after given milliseconds.

  • unstable_stopAnimation () => void

    Stops animation. It's called automatically if there's a CSS transition. It's called after given milliseconds if animated is a number.