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>
    </>
  );
}

#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