https://github.com/react-component/dropdown
React Dropdown
https://github.com/react-component/dropdown
Last synced: 4 months ago
JSON representation
React Dropdown
- Host: GitHub
- URL: https://github.com/react-component/dropdown
- Owner: react-component
- License: mit
- Created: 2015-05-30T09:31:49.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2025-02-25T07:07:41.000Z (10 months ago)
- Last Synced: 2025-08-08T21:29:07.568Z (5 months ago)
- Language: TypeScript
- Homepage: https://dropdown.react-component.now.sh/
- Size: 3.4 MB
- Stars: 178
- Watchers: 23
- Forks: 112
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE
Awesome Lists containing this project
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
## Example
online example: http://react-component.github.io/dropdown/examples/
## install
[](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
boolean
true (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.