Collapsible

Collapsible is a control that shows or hides a single panel of content.

API Reference

@viliha starred 3 repositories

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/collapsible.tsx

Import from@viliha/vui-react/collapsible

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

Control it with `open` / `onOpenChange`, or leave it uncontrolled.

collapsible-demo.tsx

import {
  Collapsible, CollapsibleTrigger, CollapsibleContent,
} from "@viliha/vui-react/collapsible";

export function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Hidden content revealed here.</CollapsibleContent>
    </Collapsible>
  );
}

Collapsible props

It takes no props of its own. Everything you pass reaches the underlying CollapsiblePrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

CollapsibleContent props

It takes no props of its own. Everything you pass reaches the underlying CollapsiblePrimitive.CollapsibleContent primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

CollapsibleTrigger props

It takes no props of its own. Everything you pass reaches the underlying CollapsiblePrimitive.CollapsibleTrigger primitive, so every attribute it accepts works here unchanged and nothing is invented on top.