Skip to main content
Reakit
DocumentationNewsletter
Spectrum
GitHub
GitHub

Hidden

Accessible Hidden component that is an abstraction based on the WAI-ARIA Disclosure Pattern.

#Installation

npm install reakit

Learn more in Get started.

#Usage

Hidden
import { useHiddenState, Hidden, HiddenDisclosure } from "reakit/Hidden";

function Example() {
  const hidden = useHiddenState({ visible: true });
  return (
    <>
      <HiddenDisclosure {...hidden}>Toggle</HiddenDisclosure>
      <Hidden {...hidden}>Hidden</Hidden>
    </>
  );
}

#Conditionally rendering

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

import { useHiddenState, Hidden, HiddenDisclosure } from "reakit/Hidden";

function Example() {
  const hidden = useHiddenState();
  return (
    <>
      <HiddenDisclosure {...hidden}>Toggle</HiddenDisclosure>
      {/* instead of {hidden.visible && <Hidden {...hidden}>Hidden</Hidden>} */}
      <Hidden {...hidden}>
        {props => hidden.visible && <div {...props}>Hidden</div>}
      </Hidden>
    </>
  );
}

#Multiple components

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

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

import { useHiddenState, Hidden, HiddenDisclosure } from "reakit/Hidden";

function Example() {
  const hidden1 = useHiddenState();
  const hidden2 = useHiddenState();
  return (
    <>
      <HiddenDisclosure {...hidden1}>
        {props => (
          <HiddenDisclosure {...props} {...hidden2}>
            Toggle All
          </HiddenDisclosure>
        )}
      </HiddenDisclosure>
      <Hidden {...hidden1}>Hidden 1</Hidden>
      <Hidden {...hidden2}>Hidden 2</Hidden>
    </>
  );
}

#Accessibility

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

Learn more in Accessibility.

#Composition

Learn more in Composition.

#Props

#useHiddenState

  • 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.

#Hidden

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.

  • 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.

#HiddenDisclosure

  • 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.

2 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.

  • toggle () => void

    Toggles the visible state