Stable

Expander Group

The Expander Group is used for grouping Expander components.

GitHub, opens in a new tab·Storybook, opens in a new tab

Installation

bash

npm install @nib-components/expander-group

Usage

jsx

import ExpanderGroup from '@nib-components/expander-group';

Interactive demo

jsx

() => {
  const ExpandedSection = props => (
    <div>
      <TertiaryButton onClick={props.onToggleExpanded}>
        <strong>{props.title}</strong>
      </TertiaryButton>
      <Expander expanded={props.expanded}>{props.children}</Expander>
    </div>
  );

  return (
    <ExpanderGroup>
      <ExpandedSection title="First expanding section">
        <Box padding={4}>Lorem ipsum dolor si amet parturient.</Box>
      </ExpandedSection>
      <ExpandedSection title="Second expanding section">
        <Box padding={4}>Lorem ipsum dolor si amet parturient.</Box>
      </ExpandedSection>
      <ExpandedSection title="Third expanding section">
        <Box padding={4}>Lorem ipsum dolor si amet parturient.</Box>
      </ExpandedSection>
    </ExpanderGroup>
  );
};

Props

Prop	Type	Default	Description
`expandedIndex`	number	`null`	Index of the expander to be expanded.
`expandedIndexes`	number[]	`null`	Indexes of multiple expanders to be expanded. Requires multiExpanded = true
`onExpanderToggled`	function		A function to be called when the expander is toggled.
`multiExpanded`	boolean	`false`	By default, only a single `<Expander />` is allowed to be open at any one time. This allows more than one to be open at any one time.
`component`	component	`div`	The underlying component wrapping the expander-group.

In addition to these props, expanded and onToggleExpanded props are passed down to the children of <ExpanderGroup /> to keep state on the expanded state.

Considerations

Expander Group by default limits the number of Expanders allowed open at a time to one. However, Expander Group can allow multiple Expanders to be open at a time with the multiExpanded prop.

Expander Group can initially open a specifc Expander by setting the index to the zero-based index of the Expander using the expandedIndex prop.