@rc-component/collapse

@rc-component/collapse

_{Part of the Ant Design ecosystem.}

🪗 A flexible collapse and accordion component for React.

English | 简体中文

Highlights

• Supports accordion and multi-panel collapse modes.
• Prefer the items API for declarative panel configuration.
• Keeps Collapse.Panel for compatibility. It is deprecated and will be removed in v4.
• Supports custom expand icons, semantic class names, semantic styles, and motion.

Install

npm install @rc-component/collapse

Usage

import Collapse from '@rc-component/collapse';
import '@rc-component/collapse/assets/index.css';

export default function App() {
  return (
    <Collapse
      defaultActiveKey="1"
      items={[
        {
          key: '1',
          label: 'First panel',
          children: 'First panel content',
        },
        {
          key: '2',
          label: 'Second panel',
          children: 'Second panel content',
        },
      ]}
    />
  );
}

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Collapse

Property	Description	Type	Default
accordion	Only one panel can be opened at a time	boolean	false
activeKey	Current active panel key	React.Key | React.Key[]	-
className	Additional class name	string	-
classNames	Semantic class names	Partial<Record<SemanticName, string>>	-
collapsible	Specify whether panel trigger area is collapsible	header | icon | disabled	-
defaultActiveKey	Initial active panel key	React.Key | React.Key[]	-
destroyOnHidden	Destroy inactive panel content	boolean	false
expandIcon	Custom expand icon	(props: object) => React.ReactNode	-
items	Collapse items content	ItemType[]	-
openMotion	Custom open motion	CSSMotionProps	-
prefixCls	Component class name prefix	string	rc-collapse
style	Inline style	object	-
styles	Semantic styles	Partial<Record<SemanticName, React.CSSProperties>>	-
onChange	Callback when active panels change	(key: React.Key[]) => void	-

ItemType

Property	Description	Type	Default
key	Panel key	React.Key	-
label	Panel header content	React.ReactNode	-
ref	Panel DOM ref	React.RefObject<HTMLDivElement>	-
children	Panel body content	React.ReactNode	-
className	Additional panel class name	string	-
classNames	Semantic class names	Partial<Record<SemanticName, string>>	-
collapsible	Specify whether the panel is collapsible	header | icon | disabled	-
destroyOnHidden	Destroy inactive panel content	boolean	false
extra	Extra content in the panel header	React.ReactNode	-
forceRender	Render panel content before it is opened	boolean	false
showArrow	Show arrow beside header	boolean	true
style	Inline panel style	object	-
styles	Semantic styles	Partial<Record<SemanticName, React.CSSProperties>>	-
onItemClick	Callback when this panel is clicked	(panelKey: React.Key) => void	-

Collapse.Panel

Collapse.Panel is deprecated. Use items instead.

Development

npm install
npm start

The dumi site runs at http://localhost:8000 by default.

npm test
npm run tsc
npm run lint
npm run compile
npm run build

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/collapse is released under the MIT license.

Similar packages

Other packages similar to @rc-component/collapse

rc-collapse

A closely related React collapse component with panel and accordion features. It has a similar component model and is often used in the same ecosystem; check its version and API before substituting it.

antd

Ant Design is a full React UI library whose `Collapse` component offers expandable panels and accordion behavior. It provides a more fully styled, design-system-oriented component, while @rc-component/collapse is a lower-level component.

@mui/material

Material UI provides `Accordion` and related components for expandable content. It integrates with Material Design styling and theming, unlike the more minimal, lower-level approach of @rc-component/collapse.

@radix-ui/react-accordion

Radix UI provides an accessible, unstyled accordion primitive with single- and multiple-open modes. It offers a headless, accessibility-focused API, whereas @rc-component/collapse provides its own collapse and panel component model.

react-collapsed

A lightweight hook for building custom collapsible elements. It gives developers control over their markup and styling, but does not provide the same ready-made panel grouping and accordion component structure.