# rc-collapse rc-collapse ui component for react [![NPM version][npm-image]][npm-url] [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url] [npm-image]: http://img.shields.io/npm/v/rc-collapse.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-collapse [github-actions-image]: https://github.com/react-component/collapse/workflows/CI/badge.svg [github-actions-url]: https://github.com/react-component/collapse/actions [codecov-image]: https://img.shields.io/codecov/c/github/react-component/collapse/master.svg?style=flat-square [codecov-url]: https://app.codecov.io/gh/react-component/collapse [download-image]: https://img.shields.io/npm/dm/rc-collapse.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-collapse ## Live Demo http://react-component.github.io/collapse/ ## Install [![rc-collapse](https://nodei.co/npm/rc-collapse.png)](https://npmjs.org/package/rc-collapse) ## Usage ```js var Collapse = require('rc-collapse'); var Panel = Collapse.Panel; var React = require('react'); var ReactDOM = require('react-dom'); require('rc-collapse/assets/index.css'); var App = ( this is panel content this is panel content2 or other ); ReactDOM.render(App, container); ``` ## Features - support ie8,ie8+,chrome,firefox,safari ## API ### Collapse props

name	type	default	description
activeKey	String\|Array	The first panel key	current active Panel key
className	String or object		custom className to apply
defaultActiveKey	String\|Array	null	default active key
destroyInactivePanel	Boolean	false	If destroy the panel which not active, default false.
accordion	Boolean	false	accordion mode, default is null, is collapse mode
onChange	Function(key)	noop	called when collapse Panel is changed
expandIcon	(props: PanelProps) => ReactNode		specific the custom expand icon.
collapsible	'header' \| 'icon' \| 'disabled'	-	specify whether the panel of children is collapsible or the area of collapsible.
items	interface.ts#ItemType	-	collapse items content

If `accordion` is null or false, every panel can open. Opening another panel will not close any of the other panels. `activeKey` should be an string, if passing an array (the first item in the array will be used). If `accordion` is true, only one panel can be open. Opening another panel will cause the previously opened panel to close. `activeKey` should be an string, if passing an array (the first item in the array will be used). ### Collapse.Panel props > **deprecated** use `items` instead, will be removed in `v4.0.0`

name	type	default	description
header	String or node		header content of Panel
headerClass	String	' '	custom className to apply to header
showArrow	boolean	true	show arrow beside header
className	String or object		custom className to apply
style	object		custom style
openMotion	object		set the animation of open behavior, [more](https://github.com/react-component/motion). Different with v2, closed pane use a `rc-collapse-content-hidden` class to set `display: none` for hidden.
forceRender	boolean	false	forced render of content in panel, not lazy render after clicking on header
extra	String \| ReactNode		Content to render in the right of the panel header
collapsible	'header' \| 'icon' \| 'disabled'	-	specify whether the panel be collapsible or the area of collapsible.

> `disabled` is removed since 3.0.0, please use `collapsible=disabled` replace it. #### key If `key` is not provided, the panel's index will be used instead. #### KeyBoard Event By default, Collapse will listen `onKeyDown`(<3.7.0 `onKeyPress`) event with `enter` key to toggle panel's active state when `collapsible` is not `disabled`. If you want to disable this behavior, you can prevent the event from bubbling like this: ```jsx const App = () => { const items: CollapseProps['items'] = [ { label: e.stopPropagation()} />, children: 'content', }, { label: (

e.stopPropagation()}>

), children: 'content', }, { label: 'title 2', children: 'content 2', collapsible: 'disabled', }, { label: 'title 3', children: 'content 3', onItemClick: console.log, }, ]; return ; }; ``` ## Development ```bash npm install npm start ``` ## Test Case ```bash npm test ``` ## Coverage ```bash npm test -- --coverage ``` ## License rc-collapse is released under the MIT license.

	Stars	Issues	Version	Updated	Created
rc-collapse			3.7.3	a month ago	9 years ago
react-slick	11,538	466	0.30.2	2 months ago	9 years ago
react-slider	880	35	2.0.6	10 months ago	10 years ago
react-swipe			6.0.4	5 years ago	10 years ago

rc-collapse vs react-slick vs react-slider vs react-swipe

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past