# rc-dropdown > dropdown ui component for react Latest version **4.2.1** (published 2024-12-11) · MIT license · 0 weekly downloads ## Install ```sh npm install rc-dropdown pnpm add rc-dropdown yarn add rc-dropdown bun add rc-dropdown ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. Negative: stale. ## Facts | | | |---|---| | Version | 4.2.1 | | Published | 2024-12-11 | | First published | 2015-06-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 42 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 181 | | Maintainers | benjycui, yesmeck, afc163, yiminghe, zombiej, madccc | | Keywords | react, react-dropdown | ## Links - npm: https://www.npmjs.com/package/rc-dropdown - Repository: https://github.com/react-component/dropdown - Homepage: http://github.com/react-component/dropdown - Issues: http://github.com/react-component/dropdown/issues - npm.io page: https://npm.io/package/rc-dropdown ## Dependencies (4) - [rc-util](https://npm.io/package/rc-util.md) ^5.44.1 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.18.3 - [@rc-component/trigger](https://npm.io/package/@rc-component/trigger.md) ^2.0.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 4.2.1 (latest) — 2024-12-11 - 4.2.0 — 2024-03-08 - 4.1.0 — 2023-04-27 - 4.1.0-alpha.1 — 2023-04-26 - 4.1.0-alpha.0 — 2023-04-26 - 4.0.1 — 2022-06-09 - 4.0.0 — 2022-05-30 - 3.6.2 — 2022-04-28 - 3.6.1 — 2022-04-28 - 3.6.0 — 2022-04-28 - 3.5.2 — 2022-04-27 - 3.5.1 — 2022-04-26 - 3.5.0 — 2022-04-21 - 3.4.1 — 2022-04-01 - 3.4.0 — 2022-03-27 - … 53 more at https://npm.io/package/rc-dropdown/versions ## README # rc-dropdown react dropdown component [![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![Dependencies][david-image]][david-url] [![DevDependencies][david-dev-image]][david-dev-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url] [npm-image]: http://img.shields.io/npm/v/rc-dropdown.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-dropdown [travis-image]: https://img.shields.io/travis/react-component/dropdown.svg?style=flat-square [travis-url]: https://travis-ci.org/react-component/dropdown [coveralls-image]: https://img.shields.io/coveralls/react-component/dropdown.svg?style=flat-square [coveralls-url]: https://coveralls.io/r/react-component/dropdown?branch=master [david-url]: https://david-dm.org/react-component/dropdown [david-image]: https://david-dm.org/react-component/dropdown/status.svg?style=flat-square [david-dev-url]: https://david-dm.org/react-component/dropdown?type=dev [david-dev-image]: https://david-dm.org/react-component/dropdown/dev-status.svg?style=flat-square [download-image]: https://img.shields.io/npm/dm/rc-dropdown.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-dropdown [bundlephobia-url]: https://bundlephobia.com/result?p=rc-dropdown [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-dropdown [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square [dumi-url]: https://github.com/umijs/dumi ## Screenshot ![](https://t.alipayobjects.com/images/rmsweb/T1bWpgXgBaXXXXXXXX.png) ## Example online example: http://react-component.github.io/dropdown/examples/ ## install [![rc-dropdown](https://nodei.co/npm/rc-dropdown.png)](https://npmjs.org/package/rc-dropdown) ## Usage ```js var Dropdown = require('rc-dropdown'); // use dropdown ``` ## API ### props                                        
name type default description
overlayClassName String additional css class of root dom node
openClassName String`${prefixCls}-open`className of trigger when dropdown is opened
prefixCls String rc-dropdown prefix class name
transitionName String dropdown menu's animation css class name
animation String part of dropdown menu's animation css class name
placement String bottomLeft Position of menu item. There are: top, topCenter, topRight, bottomLeft, bottom, bottomRight
onVisibleChange Function call when visible is changed
visible boolean whether tooltip is visible
defaultVisible boolean whether tooltip is visible initially
overlay rc-menu rc-menu element
onOverlayClick function(e) call when overlay is clicked
minOverlayWidthMatchTrigger booleantrue (false when set alignPoint)whether overlay's width must not be less than trigger's
getPopupContainer Function(menuDOMNode): HTMLElement () => document.body Where to render the DOM node of dropdown
Note: Additional props are passed into the underlying [rc-trigger](https://github.com/react-component/trigger) component. This can be useful for example, to display the dropdown in a separate [portal](https://reactjs.org/docs/portals.html)-driven window via the `getDocument()` rc-trigger prop. ## Development ```bash npm install npm start ``` ## Test Case ```bash npm test npm run chrome-test ``` ## Coverage ```bash npm run coverage ``` open coverage/ dir ## License rc-dropdown is released under the MIT license. --- _Source: https://npm.io/package/rc-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._