Tracks the active status of child Activatable components. This component is a Context Provider, it does not render any elements.

This component can be used to build accordions, tabs, toggle buttons, offscreen navs, and any other component that toggles an on/off state.

Live Demo

An array of ids to default to active.

Allows multiple ids to be active simultaneously. Defaults to false.

Allows all ids to be inactive simultaneously. Defaults to true.

Live Demo

Each child Activatable component must have an id, which is used to track its active state. Multiple Activatable components can have the same id, and ids may be strings or numbers.

The Activatable component wraps a child function which receives a props object:

Live Demo