Stable

Expander

The Expander is used for hiding and showing information.

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

Installation

bash

npm install @nib-components/expander

Usage

jsx

import Expander from '@nib-components/expander';

Interactive demo

jsx

() => {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <>
      <PrimaryButton onClick={() => setExpanded(!expanded)}>{expanded ? 'Collapse' : 'Expand'}</PrimaryButton>
      <Expander expanded={expanded}>
        <Box padding={4}>Lorem ipsum dolor si amet parturient neque scelerisque condimentum massa</Box>
      </Expander>
    </>
  );
};

() => {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <>
      <PrimaryButton onClick={() => setExpanded(!expanded)}>{expanded ? 'Collapse' : 'Expand'}</PrimaryButton>
      <Expander expanded={expanded}>
        <Box padding={4}>Lorem ipsum dolor si amet parturient neque scelerisque condimentum massa</Box>
      </Expander>
    </>
  );
};

Props

Prop	Type	Description
`expanded`	boolean	Whether the expandable section is hidden or not.
`onExpand`	function	A function called when the Expander expands.
`onBeforeExpand`	function	A function called before the Expander expands. Useful for timing animations or layout effects.
`onCollapse`	function	A function called when the Expander collapses.
`onBeforeCollapse`	function	A function called before the Expander collapses. Useful for timing animations or layout effects.

Considerations

Don't use top-level vertical margins

Refrain from using vertical margins at the top level inside the Expander component. The animation does not account for margins in the calculated height and will cause a jump at the end of the animation.

An alternative is the Accordion component, which we encourage as it allows search engines to see hidden content. Also, be cautious of unnecessarily hiding information from the user. If in doubt, use the Accordion.

If you are using the Expander component to hide and show a number of items, consider using the Expander Group component from the interactive demo to control the behaviour of the group.

Edit this page