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 Ariakit Disclosure internally.
Example
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.
import {
ExpandDisclosure,
ExpandDisclosureContent,
useExpandDisclosureStore,
} from "swash/ExpandDisclosure";
() => {
const expandedDisclosure = useExpandDisclosureStore({});
return (
<>
<ExpandDisclosure {...expandedDisclosure} render={<Button />}>
Toggle
</ExpandDisclosure>
<ExpandDisclosureContent {...expandedDisclosure}>
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 or ...
</ExpandDisclosureContent>
</>
);