Expand

Animate the expand of a component with its real height.

Usage

Height is automatically computed and the component is animated using FLIP technique.

This components uses Reakit Disclosure internally.

import { x } from "@xstyled/styled-components";
import { useState } from "react";
import {
  ExpandDisclosure,
  ExpandDisclosureContent,
  useExpandDisclosureState,
} from "swash/ExpandDisclosure";

function Example() {
  const disclosure = useExpandDisclosureState();
  return (
    <>
      <ExpandDisclosure {...disclosure}>Toggle</ExpandDisclosure>
      <ExpandDisclosureContent as={x.div} {...disclosure} fontSize={18}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        varius molestie velit vitae commodo. In libero ex, tincidunt vitae sem
        eget, euismod finibus erat. Suspendisse tristique sit amet sapien eu
        tristique. Maecenas at facilisis enim, vel malesuada ex. Vestibulum ante
        ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
        Praesent pretium mollis neque, et imperdiet lacus sollicitudin at.
        Praesent neque orci, consequat sed volutpat rhoncus, scelerisque eu
        ipsum. Ut consectetur, nunc sed venenatis gravida, massa velit interdum
        metus, eget sodales justo metus ac lacus. Quisque sit amet tincidunt
        purus. Maecenas sodales vestibulum libero quis hendrerit. Suspendisse
        ultricies neque in venenatis efficitur. Duis accumsan augue et enim
        dignissim, in sodales arcu dapibus. Integer id ipsum urna. Quisque
        iaculis nunc neque. Sed fermentum est magna, id fringilla eros
        condimentum luctus.
      </ExpandDisclosureContent>
    </>
  );
}

render(<Example />);