or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation.mdcore-component.mdindex.mdlegacy-panel.mdpanel-configuration.md
tile.json

tessl/npm-rc-collapse

React collapsible panel component with accordion support and extensive customization options

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rc-collapse@4.0.x

To install, run

npx @tessl/cli install tessl/npm-rc-collapse@4.0.0

index.mddocs/

RC-Collapse

RC-Collapse is a React component library that provides collapsible panel functionality with support for both accordion and collapse modes. It offers extensive customization options including animations, keyboard navigation, and semantic styling capabilities.

Package Information

  • Package Name: rc-collapse
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install rc-collapse

Core Imports

import Collapse from "rc-collapse";
import type { CollapseProps, CollapsePanelProps } from "rc-collapse";
import "rc-collapse/assets/index.css";

For legacy Panel component (deprecated):

import Collapse, { Panel } from "rc-collapse";
import "rc-collapse/assets/index.css";

For CommonJS:

const Collapse = require("rc-collapse");
const { Panel } = Collapse;
require("rc-collapse/assets/index.css");

Basic Usage

import Collapse from "rc-collapse";
import type { CollapseProps } from "rc-collapse";
import "rc-collapse/assets/index.css";

// Using the modern items API (recommended)
const App = () => {
  const items: CollapseProps['items'] = [
    {
      key: '1',
      label: 'Panel Header 1',
      children: <p>Panel content 1</p>,
    },
    {
      key: '2', 
      label: 'Panel Header 2',
      children: <p>Panel content 2</p>,
    },
  ];

  return <Collapse items={items} />;
};

// Controlled accordion mode
const AccordionApp = () => {
  const [activeKey, setActiveKey] = React.useState<string>('1');
  
  return (
    <Collapse
      accordion
      activeKey={activeKey}
      onChange={(keys) => setActiveKey(keys[0])}
      items={items}
    />
  );
};

Architecture

RC-Collapse is built around several key components:

  • Collapse Component: Main container that manages panel state and renders child panels
  • Panel System: Individual collapsible panels with headers, content, and animations
  • State Management: Controlled/uncontrolled patterns with active key tracking
  • Animation Integration: Smooth expand/collapse animations via rc-motion
  • Accessibility Layer: ARIA roles, keyboard navigation, and screen reader support

Capabilities

Core Collapse Component

Main collapsible container component supporting both accordion and multi-panel collapse modes with extensive customization options.

declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;

interface CollapseProps {
  prefixCls?: string;
  activeKey?: React.Key | React.Key[];
  defaultActiveKey?: React.Key | React.Key[];
  openMotion?: CSSMotionProps;
  onChange?: (key: React.Key[]) => void;
  accordion?: boolean;
  className?: string;
  style?: object;
  destroyInactivePanel?: boolean;
  expandIcon?: (props: CollapsePanelProps) => React.ReactNode;
  collapsible?: CollapsibleType;
  children?: React.ReactNode;
  items?: ItemType[];
}

type CollapsibleType = 'header' | 'icon' | 'disabled';

Core Component Details

Panel Configuration

Panel item configuration system for defining individual collapsible sections with custom headers, content, and behavior.

interface ItemType {
  key?: React.Key;
  label?: React.ReactNode;
  children?: React.ReactNode;
  collapsible?: CollapsibleType;
  onItemClick?: (panelKey: React.Key) => void;
  destroyInactivePanel?: boolean;
  className?: string;
  style?: object;
  classNames?: Partial<Record<SemanticName, string>>;
  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
  extra?: React.ReactNode;
  forceRender?: boolean;
  showArrow?: boolean;
  headerClass?: string;
  ref?: React.RefObject<HTMLDivElement>;
}

type SemanticName = 'header' | 'title' | 'body' | 'icon';

Panel Configuration

Animation and Motion

Animation system integration with rc-motion for smooth expand/collapse transitions and custom motion configurations.

interface CSSMotionProps {
  motionName?: string;
  motionAppear?: boolean;
  motionEnter?: boolean;
  motionLeave?: boolean;
  motionLeaveImmediately?: boolean;
  motionDeadline?: number;
  removeOnLeave?: boolean;
  leavedClassName?: string;
  onAppearStart?: MotionEventHandler;
  onEnterStart?: MotionEventHandler;
  onLeaveStart?: MotionEventHandler;
  onAppearActive?: MotionEventHandler;
  onEnterActive?: MotionEventHandler;
  onLeaveActive?: MotionEventHandler;
  onAppearEnd?: MotionEventHandler;
  onEnterEnd?: MotionEventHandler;
  onLeaveEnd?: MotionEventHandler;
}

Animation Configuration

Legacy Panel Component

Deprecated Panel component for backward compatibility. Use the items prop instead for new implementations.

declare const Panel: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;

interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
  id?: string;
  header?: string | React.ReactNode;
  prefixCls?: string;
  headerClass?: string;
  showArrow?: boolean;
  className?: string;
  classNames?: Partial<Record<SemanticName, string>>;
  style?: object;
  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
  isActive?: boolean;
  openMotion?: CSSMotionProps;
  destroyInactivePanel?: boolean;
  accordion?: boolean;
  forceRender?: boolean;
  extra?: string | React.ReactNode;
  onItemClick?: (panelKey: React.Key) => void;
  expandIcon?: (props: CollapsePanelProps) => React.ReactNode;
  panelKey?: React.Key;
  role?: string;
  collapsible?: CollapsibleType;
  children?: React.ReactNode;
}

Legacy Panel Component