Activatables

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.

Button 1A offButton 1B offButton 2 off
<Activatables>
    <Activatable id="1">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 1A {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
    <Activatable id="1">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 1B {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
    <Activatable id="2">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 2 {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
</Activatables>
<Activatables>
    <Activatable id="1">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 1A {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
    <Activatable id="1">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 1B {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
    <Activatable id="2">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 2 {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
</Activatables>
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.

Button 1 onButton 2 off
<Activatables
    defaultActiveIds={[ '1' ]}
    allowMultipleActive
    allowNoneActive={false}
>
    <Activatable id="1">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 1 {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
    <Activatable id="2">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 2 {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
</Activatables>
<Activatables
    defaultActiveIds={[ '1' ]}
    allowMultipleActive
    allowNoneActive={false}
>
    <Activatable id="1">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 1 {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
    <Activatable id="2">
        {({ active, toggleActive }) => (
            <Button onClick={toggleActive}>
                Button 2 {active ? 'on' : 'off'}
            </Button>
        )}
    </Activatable>
</Activatables>
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:

Inactive
<Activatables>
    <Activatable id={1}>
        {({ active, toggleActive, activeIds, setActiveIds }) => (
            <Button onClick={toggleActive}>
                {active ? 'Active' : 'Inactive'}
            </Button>
        )}
    </Activatable>
</Activatables>
<Activatables>
    <Activatable id={1}>
        {({ active, toggleActive, activeIds, setActiveIds }) => (
            <Button onClick={toggleActive}>
                {active ? 'Active' : 'Inactive'}
            </Button>
        )}
    </Activatable>
</Activatables>
Live Demo