CollapsibleStateContainer

The CollapsibleStateContainer provides you with with the necessary state to render a functional collapsible. On its own the component does not render anything. The main use case for this component is of course the Collapsible component. But you can use the state of this component for any other output as well.

Usage

The component can be imported from the design system:

import CollapsibleStateContainer from "../CollapsibleStateContainer";

The single child of the component has to be a function expecting one argument. This will be an object containing two properties isOpen and onToggle. The first one is a boolean. Its value can be changed by calling the onToggle-function.

Uncontrolled Mode

If you don't pass additional props, the component will render in an uncontrolled mode. In that case the arguments for the child function will be provided by the component itself. You can decide the initial state of the collapsible by providing an optional prop isDefaultOpened.

Controlled Mode

If you pass both isOpen and onToggle from the outside you can use the component in a controlled mode. In this case the properties you provide get passed down to the child function instead of the internal method from CollapsibleStateContainer. By using the isOpen property on CollapsibleStateContainer you can then determine whether the collapsible is open or not. The onToggle function will be executed when the open state is triggered by the identically named function provided in the child function. The onToggle function will be called with the new open state. (I.e. if the collapsible is closed before the toggle it will be called with true).

Example

Here is a working example on how you could use this component:

<Spacings.Inset>
  <Layer.Raised>
    <Spacings.Inset>
      <CollapsibleStateContainer>
        {({ isOpen, onToggle }) => (
          <Spacings.Inline alignItems="center">
            <Text>My state is {isOpen ? "open" : "not open"}.</Text>
            <Button onClick={onToggle}>Click me to toggle</Button>
          </Spacings.Inline>
        )}
      </CollapsibleStateContainer>
    </Spacings.Inset>
  </Layer.Raised>
</Spacings.Inset>