rc-collapse

library4.0.0jsnpmunverified

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.

web-framework

npm install rc-collapse

github ↗package ↗

INSTALL

IMPORT

SIG · RC-COLLAPSE

rc-collapse

web-frameworkjavascriptv4.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Collapse

✓ import Collapse from 'rc-collapse';

✗ import { Collapse } from 'rc-collapse';

The main Collapse component is a default export.

Panel (via Collapse)

✓ import Collapse from 'rc-collapse'; const { Panel } = Collapse;

✗ import { Panel } from 'rc-collapse';

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`).

CSS Styles

✓ import 'rc-collapse/assets/index.css';

Import the default styles separately to ensure correct rendering.

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.

import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import Collapse from 'rc-collapse'; import 'rc-collapse/assets/index.css'; const { Panel } = Collapse; // Panel is a static property, but deprecated in v4.0.0 in favor of 'items' prop for the successor package function App() { const [activeKey, setActiveKey] = useState(['1']); const handleChange = (keys) => { setActiveKey(keys); console.log('Active keys changed:', keys); }; return ( <div style={{ maxWidth: '600px', margin: '20px auto' }}> <h1>RC Collapse Example (v4.0.0)</h1> <Collapse accordion={false} activeKey={activeKey} onChange={handleChange} destroyInactivePanel={true} > <Panel header="This is Panel 1" key="1"> <p>Content for the first panel.</p> <p>You can put any React nodes here.</p> </Panel> <Panel header="This is Panel 2" key="2"> <p>Content for the second panel.</p> </Panel> <Panel header="This is Panel 3 (Accordion Mode Disabled)" key="3"> <p>Content for the third panel.</p> <p>Since accordion is false, multiple panels can be open.</p> </Panel> </Collapse> </div> ); } const container = document.getElementById('root'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); } else { console.error('Root element not found'); }

Debug

Known issues

breakingThe `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.

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.

affects: >=4.0.0

deprecatedThe 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.

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' }]} />`.

affects: >=4.0.0

gotchaCSS styles are not automatically included and must be imported separately. For `rc-collapse`, the styles are located at `rc-collapse/assets/index.css`.

fix

Ensure you add `import 'rc-collapse/assets/index.css';` to your application's entry point or a relevant component file.

affects: >=1.0.0

gotchaThe `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.

fix

Use `import Collapse from 'rc-collapse';` for the main component. Access the Panel via `const { Panel } = Collapse;`.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'Panel')

Attempting to destructure `Panel` from `rc-collapse` when `Collapse` was imported as a named export or incorrectly.

fix

Ensure `Collapse` is imported as a default export: `import Collapse from 'rc-collapse';` and then access `Panel` as a property: `const { Panel } = Collapse;`

Module not found: Can't resolve 'rc-collapse/assets/index.css' in '...'

The required CSS file for `rc-collapse` styles is not being imported or is imported with an incorrect path.

fix

Add `import 'rc-collapse/assets/index.css';` to your main application file or the component using `rc-collapse`.

Warning: Each child in a list should have a unique "key" prop.

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.

fix

Ensure every `<Panel>` component has a unique and stable `key` prop, e.g., `<Panel key="1" header="Panel 1">...</Panel>`.

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for UI rendering.

react-domrequiredPeer dependency for UI rendering.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/collapse ↗

packagehttps://www.npmjs.com/package/rc-collapse ↗