# @trendmicro/react-dropdown > React Dropdown component Latest version **1.4.0** (published 2020-03-12) · MIT license · 0 weekly downloads ## Install ```sh npm install @trendmicro/react-dropdown pnpm add @trendmicro/react-dropdown yarn add @trendmicro/react-dropdown bun add @trendmicro/react-dropdown ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.4.0 | | Published | 2020-03-12 | | First published | 2017-02-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 151.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Cheton Wu | | Maintainers | cheton, rothpeng, smalltase, trendmicro-frontend | | Keywords | dropdown, react, react-dropdown | ## Links - npm: https://www.npmjs.com/package/@trendmicro/react-dropdown - Repository: https://github.com/trendmicro-frontend/react-dropdown - Issues: https://github.com/trendmicro-frontend/react-dropdown/issues - npm.io page: https://npm.io/package/@trendmicro/react-dropdown ## Dependencies (7) - [warning](https://npm.io/package/warning.md) ^3.0.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.0 - [dom-helpers](https://npm.io/package/dom-helpers.md) ^3.3.1 - [uncontrollable](https://npm.io/package/uncontrollable.md) ^7.0.0 - [chained-function](https://npm.io/package/chained-function.md) ^0.5.0 - [@trendmicro/react-buttons](https://npm.io/package/@trendmicro/react-buttons.md) ^1.3.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 - 1.4.0 (latest) — 2020-03-12 - 1.3.0 — 2018-09-06 - 1.2.3 — 2018-05-02 - 1.2.2 — 2018-03-28 - 1.2.1 — 2018-03-07 - 1.2.0 — 2018-02-09 - 1.1.0 — 2018-01-11 - 1.0.0 — 2018-01-04 - 0.7.3 — 2017-12-27 - 0.7.2 — 2017-11-06 - 0.7.1 — 2017-10-06 - 0.7.0 — 2017-08-05 - 0.6.14 — 2017-06-23 - 0.6.13 — 2017-06-09 - 0.6.12 — 2017-05-20 - … 14 more at https://npm.io/package/@trendmicro/react-dropdown/versions ## README # react-dropdown [![build status](https://travis-ci.org/trendmicro-frontend/react-dropdown.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-dropdown) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-dropdown/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-dropdown?branch=master) [![NPM](https://nodei.co/npm/@trendmicro/react-dropdown.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-dropdown/) React Dropdown Demo: https://trendmicro-frontend.github.io/react-dropdown ## Installation 1. Install the latest version of [react](https://github.com/facebook/react) and [react-dropdown](https://github.com/trendmicro-frontend/react-dropdown): ``` npm install --save react @trendmicro/react-dropdown ``` 2. At this point you can import `@trendmicro/react-dropdown` and its styles in your application as follows: ```jsx import Dropdown, { DropdownToggle, DropdownMenu, DropdownMenuWrapper, MenuItem, DropdownButton } from '@trendmicro/react-dropdown'; // Be sure to include styles at some point, probably during your bootstraping import '@trendmicro/react-buttons/dist/react-buttons.css'; import '@trendmicro/react-dropdown/dist/react-dropdown.css'; ``` ## Recommended Setup Create a common components directory including both `Buttons` and `Dropdown` components, as shown below: ``` components/ Buttons/ index.js Dropdown/ index.js ``` **components/Buttons/index.js** ```jsx import '@trendmicro/react-buttons/dist/react-buttons.css'; export { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons'; ``` **components/Dropdown/index.js** ```jsx import '@trendmicro/react-dropdown/dist/react-dropdown.css'; import Dropdown from '@trendmicro/react-dropdown'; import '../Buttons'; // Ensure CSS dependency export default Dropdown; export { DropdownToggle, DropdownMenu, DropdownMenuWrapper, MenuItem, DropdownButton } from '@trendmicro/react-dropdown'; ``` Then, import `Dropdown` component in your code: ```jsx import Dropdown from './components/Dropdown'; ``` ## Custom Styling You can make style changes using inline styles or [styled-components](https://github.com/styled-components/styled-components), and specify propTypes and defaultProps by setting them as properties on the function. ### Inline Styles ```jsx const CustomDropdownMenu = (props) => ( ); CustomDropdownMenu.propTypes = Dropdown.Menu.propTypes; CustomDropdownMenu.defaultProps = Dropdown.Menu.defaultProps; ``` ### Styled Components ```jsx const CustomDropdownMenu = styled(Dropdown.Menu)` padding: 2px 0; `; CustomDropdownMenu.propTypes = Dropdown.Menu.propTypes; CustomDropdownMenu.defaultProps = Dropdown.Menu.defaultProps; ``` To increase the CSS specificity of a rule, you can simply repeat a selector, like so: ```jsx const CustomMenuItem = styled(MenuItem)` && { a { &:hover { background: ${styleConstants.selectionColor}; } padding: 0 6px; } } `; CustomMenuItem.propTypes = MenuItem.propTypes; CustomMenuItem.defaultProps = MenuItem.defaultProps; ``` ## Usage ### Dropdown ```jsx { }} > Toggler Header link Header link disabled link with title { alert(`Alert from menu item.\neventKey: ${eventKey}`); }} > link that alerts ``` ### Multi-Level Dropdown ```jsx Menu item one Menu item two Menu item three Menu item four Second level item one Second level item two Second level item three Third level item one ``` ### Dropdown Menu Wrapper ```jsx Menu item one Menu item two Menu item three ``` ### Dropdown Button ```jsx { }} > link link ``` ## API ### Properties #### Dropdown Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | ButtonGroup | A custom element for this component. dropup | boolean | false | The menu will open above the dropdown button, instead of below it. disabled | boolean | false | Whether or not component is disabled. open | boolean | false | Whether or not the dropdown is visible. autoOpen | boolean | false | Whether to open the dropdown on mouse over. pullRight | boolean | false | Align the menu to the right side of the dropdown toggle. onClose | function(event) | | A callback fired when the dropdown closes. onToggle | function(boolean) | | A callback fired when the dropdown wishes to change visibility. Called with the requested `open` value. onSelect | function(eventKey, event) | | A callback fired when a menu item is selected. role | string | | If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button. rootCloseEvent | One of:
'click'
'mousedown' | | Which event when fired outside the component will cause it to be closed. #### DropdownToggle Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | Button | A custom element for this component. btnSize | One of:
'lg'
'md'
'sm'
'xs' | 'md' | btnStyle | One of:
'default'
'primary'
'emphasis'
'flat'
'link' | 'flat' | noCaret | boolean | false | Whether to prevent a caret from being rendered next to the title. title | node | | Title content. disabled | boolean | false | Whether or not component is disabled. #### DropdownMenu Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | ul | A custom element for this component. onClose | function(event) | | A callback fired when the dropdown menu closes. onSelect | function(eventKey, event) | | A callback fired when a menu item is selected. rootCloseEvent | One of:
'click'
'mousedown' | | Which event when fired outside the component will cause it to be closed. #### DropdownMenuWrapper Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | div | A custom element for this component. onClose | function(event) | | A callback fired when the dropdown menu closes. onSelect | function(eventKey, event) | | A callback fired when a menu item is selected. rootCloseEvent | One of:
'click'
'mousedown' | | Which event when fired outside the component will cause it to be closed. #### MenuItem Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | Button | A custom element for this component. active | boolean | false | Highlight the menu item as active. disabled | boolean | false | Disable the menu item, making it unselectable. divider | boolean | false | Style the menu item as a horizontal rule, providing visual separation between groups of menu items. eventKey | any | | Value passed to the `onSelect` handler, useful for identifying the selected menu item. header | boolean | false | Style the menu item as a header label, useful for describing a group of menu items. onClick | function(event) | | Callback fired when the menu item is clicked, even if it is disabled. open | boolean | false | Whether or not the dropdown submenu is visible. onClose | function(event) | | A callback fired when the dropdown menu closes. onSelect | function(eventKey, event) | | A callback fired when a menu item is selected. rootCloseEvent | One of:
'click'
'mousedown' | | Which event when fired outside the component will cause it to be closed. #### DropdownButton Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | ButtonGroup | A custom element for this component. dropup | boolean | false | The menu will open above the dropdown button, instead of below it. disabled | boolean | false | Whether or not component is disabled. pullRight | boolean | false | Align the menu to the right side of the dropdown toggle. open | boolean | false | Whether or not the dropdown is visible. onClose | function(event) | | A callback fired when the dropdown closes. onToggle | function(boolean) | | A callback fired when the dropdown wishes to change visibility. Called with the requested `open` value. onSelect | function(eventKey, event) | | A callback fired when a menu item is selected. role | string | | If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button. rootCloseEvent | One of:
'click'
'mousedown' | | Which event when fired outside the component will cause it to be closed. btnSize | One of:
'lg'
'md'
'sm'
'xs' | 'md' | btnStyle | One of:
'default'
'primary'
'emphasis'
'flat'
'link' | 'flat' | title | node | | Title content. noCaret | boolean | false | Whether to prevent a caret from being rendered next to the title. ## License MIT --- _Source: https://npm.io/package/@trendmicro/react-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._