What is @radix-ui/react-collapsible?
The @radix-ui/react-collapsible package provides components to create collapsible sections in React applications. It is designed to be accessible and customizable, allowing developers to implement collapsible features easily while maintaining good user experience for all users, including those using assistive technologies.
Basic Collapsible Component
This code demonstrates how to create a basic collapsible component using @radix-ui/react-collapsible. It includes a trigger that toggles the visibility of the content.
import * as Collapsible from '@radix-ui/react-collapsible';
function MyComponent() {
const [open, setOpen] = React.useState(false);
return (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>
Content inside the collapsible section.
</Collapsible.Content>
</Collapsible.Root>
);
}