CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rc-collapse

React collapsible panel component with accordion support and extensive customization options

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

legacy-panel.mddocs/

Legacy Panel Component

The Panel component provides backward compatibility for existing codebases. This approach is deprecated and will be removed in v4.0.0. Use the items prop instead for new implementations.

Panel Component API

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

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

Props Documentation

Content Props

  • header: string | React.ReactNode - Panel header content
  • children: React.ReactNode - Panel body content
  • extra: string | React.ReactNode - Additional content in header area

Identification Props

  • id: string - HTML id attribute for the panel
  • panelKey: React.Key - Unique key for the panel (falls back to React key)

Styling Props

  • className: string - Custom CSS class for panel container
  • style: object - Inline styles for panel container
  • headerClass: string - Custom CSS class for panel header
  • classNames: Partial<Record<SemanticName, string>> - Semantic CSS classes
  • styles: Partial<Record<SemanticName, React.CSSProperties>> - Semantic inline styles
  • prefixCls: string - CSS class prefix (inherited from parent Collapse)

Behavior Props

  • showArrow: boolean - Show/hide expand arrow (default: true)
  • collapsible: CollapsibleType - Panel collapsible behavior
  • forceRender: boolean - Always render content even when inactive
  • destroyInactivePanel: boolean - Destroy content when panel is inactive

Event Props

  • onItemClick: (panelKey: React.Key) => void - Panel click handler
  • role: string - ARIA role override

Internal Props (managed by parent Collapse)

  • isActive: boolean - Panel active state
  • accordion: boolean - Accordion mode flag
  • openMotion: CSSMotionProps - Animation configuration
  • expandIcon: (props: CollapsePanelProps) => React.ReactNode - Custom expand icon

Usage Examples

Basic Legacy Panel Usage

import Collapse, { Panel } from "rc-collapse";

const LegacyExample = () => {
  return (
    <Collapse defaultActiveKey={['1']}>
      <Panel header="Panel 1" key="1">
        Content of panel 1
      </Panel>
      <Panel header="Panel 2" key="2">
        Content of panel 2
      </Panel>
    </Collapse>
  );
};

Panel with Custom Header

import Collapse, { Panel } from "rc-collapse";

const CustomHeaderPanel = () => {
  const customHeader = (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Icon type="user" />
      <span style={{ marginLeft: 8 }}>User Profile</span>
    </div>
  );

  return (
    <Collapse>
      <Panel header={customHeader} key="profile">
        User profile content here
      </Panel>
    </Collapse>
  );
};

Panel with Extra Content

import Collapse, { Panel } from "rc-collapse";

const PanelWithExtra = () => {
  const extraContent = (
    <button
      onClick={(e) => {
        e.stopPropagation();
        console.log('Extra button clicked');
      }}
    >
      Settings
    </button>
  );

  return (
    <Collapse>
      <Panel 
        header="Panel with Extra" 
        key="extra"
        extra={extraContent}
      >
        Panel content with extra button in header
      </Panel>
    </Collapse>
  );
};

Disabled Panel

import Collapse, { Panel } from "rc-collapse";

const DisabledPanel = () => {
  return (
    <Collapse>
      <Panel header="Normal Panel" key="normal">
        This panel can be toggled
      </Panel>
      <Panel 
        header="Disabled Panel" 
        key="disabled"
        collapsible="disabled"
      >
        This panel cannot be toggled
      </Panel>
    </Collapse>
  );
};

Panel with Custom Styling

import Collapse, { Panel } from "rc-collapse";

const StyledPanel = () => {
  return (
    <Collapse>
      <Panel
        header="Styled Panel"
        key="styled"
        className="custom-panel"
        headerClass="custom-header"
        classNames={{
          header: 'semantic-header',
          title: 'semantic-title',
          body: 'semantic-body',
        }}
        styles={{
          header: { backgroundColor: '#f0f0f0' },
          body: { padding: '20px' },
        }}
      >
        Panel with custom styling
      </Panel>
    </Collapse>
  );
};

Migration to Items API

Before (Legacy Panel)

import Collapse, { Panel } from "rc-collapse";

const LegacyApproach = () => {
  return (
    <Collapse accordion defaultActiveKey="1">
      <Panel header="First Panel" key="1" className="panel-1">
        First panel content
      </Panel>
      <Panel 
        header="Second Panel" 
        key="2"
        extra={<button>Action</button>}
        collapsible="disabled"
      >
        Second panel content
      </Panel>
    </Collapse>
  );
};

After (Modern Items)

import Collapse from "rc-collapse";

const ModernApproach = () => {
  const items = [
    {
      key: '1',
      label: 'First Panel',
      children: 'First panel content',
      className: 'panel-1',
    },
    {
      key: '2',
      label: 'Second Panel',
      children: 'Second panel content',
      extra: <button>Action</button>,
      collapsible: 'disabled',
    },
  ];

  return (
    <Collapse 
      accordion 
      defaultActiveKey="1"
      items={items}
    />
  );
};

Migration Benefits

Advantages of Items API

  1. Better Performance: No need to clone React elements
  2. Simpler Configuration: Plain objects instead of JSX components
  3. Better TypeScript Support: Full type inference for item properties
  4. Easier Testing: Simple object structures are easier to test
  5. Better Developer Experience: Cleaner code and better IDE support

Migration Strategy

  1. Gradual Migration: Both approaches can coexist during transition
  2. Automated Tools: Consider writing codemods for large codebases
  3. Feature Parity: Items API supports all Panel features
  4. No Breaking Changes: Existing Panel usage continues to work until v4.0.0

Deprecation Timeline

  • Current (3.x): Panel component works with deprecation warnings
  • v4.0.0: Panel component will be removed
  • Recommendation: Migrate to items API for new code
  • Support: Legacy Panel will receive bug fixes until v4.0.0

Install with Tessl CLI

npx tessl i tessl/npm-rc-collapse

docs

animation.md

core-component.md

index.md

legacy-panel.md

panel-configuration.md

tile.json