@radix-ui/react-collapsible

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.

What are @radix-ui/react-collapsible's main functionalities?

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

Other packages similar to @radix-ui/react-collapsible

react-collapsible

react-collapsible is another popular package for creating collapsible components in React. It offers similar functionality but differs in implementation details and API design. react-collapsible might be simpler to use for basic use cases, while @radix-ui/react-collapsible provides more control and customization options.

react-collapse

react-collapse provides components to create collapsible elements using CSS transitions for animations. It focuses more on the animation aspects and might be preferred if smooth animations are a priority. However, @radix-ui/react-collapsible offers better accessibility features out of the box.

README

react-collapsible

Installation

$ yarn add @radix-ui/react-collapsible
# or
$ npm install @radix-ui/react-collapsible

Usage

View docs here.