{"id":14857,"library":"rc-collapse","title":"React Collapse Component","description":"rc-collapse is a foundational React UI component for creating collapsible panels and accordions. This package, at version 4.0.0, is effectively the final major release under the `rc-collapse` name. Development and active maintenance have since transitioned to the `@rc-component/collapse` package, which continues to evolve the component's features and API. While `rc-collapse@4.0.0` is stable and functional for its specified React peer dependencies (`>=16.9.0`), new features, bug fixes, and long-term support are primarily focused on the successor package. It provides basic collapse functionality with options for accordion mode, custom expand icons, and panel content destruction, but its API for defining panels via `Collapse.Panel` components is superseded by an `items` prop in the newer `@rc-component/collapse` package.","status":"maintenance","version":"4.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/collapse","tags":["javascript","react","react-component","react-rc-collapse","rc-collapse","collapse","accordion","typescript"],"install":[{"cmd":"npm install rc-collapse","lang":"bash","label":"npm"},{"cmd":"yarn add rc-collapse","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-collapse","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for UI rendering.","package":"react","optional":false},{"reason":"Peer dependency for UI rendering.","package":"react-dom","optional":false}],"imports":[{"note":"The main Collapse component is a default export.","wrong":"import { Collapse } from 'rc-collapse';","symbol":"Collapse","correct":"import Collapse from 'rc-collapse';"},{"note":"Panel is a static property of the default Collapse export, not a named export itself. Note that `Panel` components are deprecated in `v4.0.0` in favor of an `items` prop (though `items` primarily gained full functionality in the successor package `@rc-component/collapse`).","wrong":"import { Panel } from 'rc-collapse';","symbol":"Panel (via Collapse)","correct":"import Collapse from 'rc-collapse';\nconst { Panel } = Collapse;"},{"note":"Import the default styles separately to ensure correct rendering.","symbol":"CSS Styles","correct":"import 'rc-collapse/assets/index.css';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Collapse from 'rc-collapse';\nimport 'rc-collapse/assets/index.css';\n\nconst { Panel } = Collapse; // Panel is a static property, but deprecated in v4.0.0 in favor of 'items' prop for the successor package\n\nfunction App() {\n  const [activeKey, setActiveKey] = useState(['1']);\n\n  const handleChange = (keys) => {\n    setActiveKey(keys);\n    console.log('Active keys changed:', keys);\n  };\n\n  return (\n    <div style={{ maxWidth: '600px', margin: '20px auto' }}>\n      <h1>RC Collapse Example (v4.0.0)</h1>\n      <Collapse\n        accordion={false}\n        activeKey={activeKey}\n        onChange={handleChange}\n        destroyInactivePanel={true}\n      >\n        <Panel header=\"This is Panel 1\" key=\"1\">\n          <p>Content for the first panel.</p>\n          <p>You can put any React nodes here.</p>\n        </Panel>\n        <Panel header=\"This is Panel 2\" key=\"2\">\n          <p>Content for the second panel.</p>\n        </Panel>\n        <Panel header=\"This is Panel 3 (Accordion Mode Disabled)\" key=\"3\">\n          <p>Content for the third panel.</p>\n          <p>Since accordion is false, multiple panels can be open.</p>\n        </Panel>\n      </Collapse>\n    </div>\n  );\n}\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = ReactDOM.createRoot(container);\n  root.render(<App />);\n} else {\n  console.error('Root element not found');\n}","lang":"typescript","description":"Demonstrates a basic multi-panel collapse component with initial active state, change handler, and importing necessary styles. Shows deprecated `Panel` component usage as `items` prop was not fully introduced until the successor package."},"warnings":[{"fix":"Migrate your package dependency from `rc-collapse` to `@rc-component/collapse`. Review the changelogs for `@rc-component/collapse` as there may be API changes (e.g., the introduction of the `items` prop). Check the official repository for the latest migration guide if available.","message":"The `rc-collapse` package, particularly at version 4.0.0, is effectively succeeded by the `@rc-component/collapse` package. While `rc-collapse@4.0.0` is a stable release, all future development, bug fixes, and new features will occur under the new package name. Migrating to `@rc-component/collapse` is highly recommended for ongoing projects.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"For new development or when migrating to `@rc-component/collapse`, use the `items` prop instead of `Collapse.Panel` children. For example: `<Collapse items={[{ key: '1', label: 'Panel Header', children: 'Panel Content' }]} />`.","message":"The use of `<Collapse.Panel>` components as children to define panels is deprecated starting from `rc-collapse@4.0.0`. The successor package, `@rc-component/collapse`, primarily uses an `items` prop on the `Collapse` component for defining panel content and properties. While `Panel` components might still function in `v4.0.0`, they are not the forward-looking approach.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Ensure you add `import 'rc-collapse/assets/index.css';` to your application's entry point or a relevant component file.","message":"CSS styles are not automatically included and must be imported separately. For `rc-collapse`, the styles are located at `rc-collapse/assets/index.css`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `import Collapse from 'rc-collapse';` for the main component. Access the Panel via `const { Panel } = Collapse;`.","message":"The `Collapse` component is a default export, meaning it should be imported without curly braces. Its `Panel` sub-component is exposed as a static property, not a named export.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Collapse` is imported as a default export: `import Collapse from 'rc-collapse';` and then access `Panel` as a property: `const { Panel } = Collapse;`","cause":"Attempting to destructure `Panel` from `rc-collapse` when `Collapse` was imported as a named export or incorrectly.","error":"TypeError: Cannot read properties of undefined (reading 'Panel')"},{"fix":"Add `import 'rc-collapse/assets/index.css';` to your main application file or the component using `rc-collapse`.","cause":"The required CSS file for `rc-collapse` styles is not being imported or is imported with an incorrect path.","error":"Module not found: Can't resolve 'rc-collapse/assets/index.css' in '...'"},{"fix":"Ensure every `<Panel>` component has a unique and stable `key` prop, e.g., `<Panel key=\"1\" header=\"Panel 1\">...</Panel>`.","cause":"When using `Collapse.Panel` components, each `Panel` must have a unique `key` prop, especially when used in lists or dynamically generated. The `key` prop is also used by `activeKey` to identify panels.","error":"Warning: Each child in a list should have a unique \"key\" prop."}],"ecosystem":"npm"}