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

() => {
  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.

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.