Collapse

The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user.

This component leverages react-animate-height, and composes the Box component.

Usage

Basic Usage

Editable Example

function Example() {
  const [open, setOpen] = React.useState(false);
  const handleToggle = () => setOpen(!open);

  return (
    <>
      <Button
        appearance="primary"
        onClick={handleToggle}
        iconAfter="small-chevron-down"
        iconRotate={open ? 'rotate-180' : 'rotate-0'}
      >
        Toggle
      </Button>
      <Collapse margin="mt-4" open={open}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
        keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
    </>
  );
}

function Example() {
  const [open, setOpen] = React.useState(false);
  const handleToggle = () => setOpen(!open);
  return (
    <>
      <Button
        appearance="primary"
        onClick={handleToggle}
        iconAfter="small-chevron-down"
        iconRotate={open ? 'rotate-180' : 'rotate-0'}
      >
        Toggle
      </Button>
      <Collapse margin="mt-4" open={open}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
        keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
    </>
  );
}

Changing the startingHeight

This demo also shows how it can be combined with the truncate prop of the Text component.

Editable Example

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

function Example() {
  const [open, setOpen] = React.useState(false);
  const [truncate, setTruncate] = React.useState(!open);
  const handleToggle = () => setOpen(!open);
  const handleAnimationChange = () => setTruncate(!open);

  return (
    <>
      <Collapse
        startingHeight={24}
        open={open}
        onAnimationStart={handleAnimationChange}
        onAnimationEnd={handleAnimationChange}
        alwaysRenderChildren
      >
        <Text truncate={!open && truncate}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
          keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </Text>
      </Collapse>
      <Button
        appearance="link"
        spacing="none"
        onClick={handleToggle}
        margin="mt-1"
        iconAfter={`small-chevron-${open ? 'up' : 'down'}`}
      >
        show {open ? 'less' : 'more'}
      </Button>
    </>
  );
}

function Example() {
  const [open, setOpen] = React.useState(false);
  const [truncate, setTruncate] = React.useState(!open);
  const handleToggle = () => setOpen(!open);
  const handleAnimationChange = () => setTruncate(!open);
  return (
    <>
      <Collapse
        startingHeight={24}
        open={open}
        onAnimationStart={handleAnimationChange}
        onAnimationEnd={handleAnimationChange}
        alwaysRenderChildren
      >
        <Text truncate={!open && truncate}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
          keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </Text>
      </Collapse>
      <Button
        appearance="link"
        spacing="none"
        onClick={handleToggle}
        margin="mt-1"
        iconAfter={`small-chevron-${open ? 'up' : 'down'}`}
      >
        show {open ? 'less' : 'more'}
      </Button>
    </>
  );
}

Props

This component doesn't have any custom props.

Name	Type	Description
open	`boolean`	If `true`, the content will be visible
animateOpacity	`boolean`	If `true`, the opacity of the content will be animated
duration	`number`	The animation duration as it expands
startingHeight	`number`	The height you want the content in it's collapsed state. Set to `0` by default
endingHeight	`number`	The height you want the content in it's expanded state. Set to `auto` by default
onAnimationEnd	`func`	The function to be called when the collapse animation starts. It provides the `currentHeight` as an argument
onAnimationStart	`func`	The function to be called when the collapse animation ends. It provides the `currentHeight` as an argument