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