{"id":13755444,"url":"https://github.com/trendmicro-frontend/react-dropdown","last_synced_at":"2025-04-06T05:16:14.518Z","repository":{"id":57167645,"uuid":"82313391","full_name":"trendmicro-frontend/react-dropdown","owner":"trendmicro-frontend","description":"React Dropdown component","archived":false,"fork":false,"pushed_at":"2023-09-22T14:11:33.000Z","size":4532,"stargazers_count":115,"open_issues_count":18,"forks_count":21,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-30T04:09:11.434Z","etag":null,"topics":["dropdown","react"],"latest_commit_sha":null,"homepage":"https://trendmicro-frontend.github.io/react-dropdown","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trendmicro-frontend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-02-17T16:00:24.000Z","updated_at":"2024-02-08T19:56:44.000Z","dependencies_parsed_at":"2024-01-17T15:04:23.724Z","dependency_job_id":"fddfc0e3-2aaf-4789-9778-313b505d18be","html_url":"https://github.com/trendmicro-frontend/react-dropdown","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendmicro-frontend","download_url":"https://codeload.github.com/trendmicro-frontend/react-dropdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436286,"owners_count":20938533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dropdown","react"],"created_at":"2024-08-03T10:00:54.368Z","updated_at":"2025-04-06T05:16:14.356Z","avatar_url":"https://github.com/trendmicro-frontend.png","language":"JavaScript","funding_links":[],"categories":["Trend Micro"],"sub_categories":["React Components"],"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)\n\n[![NPM](https://nodei.co/npm/@trendmicro/react-dropdown.png?downloads=true\u0026stars=true)](https://nodei.co/npm/@trendmicro/react-dropdown/)\n\nReact Dropdown\n\nDemo: https://trendmicro-frontend.github.io/react-dropdown\n\n## Installation\n\n1. Install the latest version of [react](https://github.com/facebook/react) and [react-dropdown](https://github.com/trendmicro-frontend/react-dropdown):\n\n  ```\n  npm install --save react @trendmicro/react-dropdown\n  ```\n\n2. At this point you can import `@trendmicro/react-dropdown` and its styles in your application as follows:\n\n  ```jsx\n  import Dropdown, {\n      DropdownToggle,\n      DropdownMenu,\n      DropdownMenuWrapper,\n      MenuItem,\n      DropdownButton\n  } from '@trendmicro/react-dropdown';\n\n  // Be sure to include styles at some point, probably during your bootstraping\n  import '@trendmicro/react-buttons/dist/react-buttons.css';\n  import '@trendmicro/react-dropdown/dist/react-dropdown.css';\n  ```\n\n## Recommended Setup\n\nCreate a common components directory including both `Buttons` and `Dropdown` components, as shown below:\n```\ncomponents/\n  Buttons/\n    index.js\n  Dropdown/\n    index.js\n```\n\n**components/Buttons/index.js**\n```jsx\nimport '@trendmicro/react-buttons/dist/react-buttons.css';\n\nexport { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';\n```\n\n**components/Dropdown/index.js**\n```jsx\nimport '@trendmicro/react-dropdown/dist/react-dropdown.css';\nimport Dropdown from '@trendmicro/react-dropdown';\nimport '../Buttons'; // Ensure CSS dependency\n\nexport default Dropdown;\nexport {\n    DropdownToggle,\n    DropdownMenu,\n    DropdownMenuWrapper,\n    MenuItem,\n    DropdownButton\n} from '@trendmicro/react-dropdown';\n```\n\nThen, import `Dropdown` component in your code:\n```jsx\nimport Dropdown from './components/Dropdown';\n```\n\n## Custom Styling\n\nYou 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.\n\n### Inline Styles\n```jsx\nconst CustomDropdownMenu = (props) =\u003e (\n    \u003cDropdown.Menu {...props} style={{ padding: '2px 0' }} /\u003e\n);\nCustomDropdownMenu.propTypes = Dropdown.Menu.propTypes;\nCustomDropdownMenu.defaultProps = Dropdown.Menu.defaultProps;\n```\n\n### Styled Components\n```jsx\nconst CustomDropdownMenu = styled(Dropdown.Menu)`\n    padding: 2px 0;\n`;\nCustomDropdownMenu.propTypes = Dropdown.Menu.propTypes;\nCustomDropdownMenu.defaultProps = Dropdown.Menu.defaultProps;\n```\n\nTo increase the CSS specificity of a rule, you can simply repeat a selector, like so:\n```jsx\nconst CustomMenuItem = styled(MenuItem)`\n\u0026\u0026 {\n    a {\n        \u0026:hover {\n            background: ${styleConstants.selectionColor};\n        }\n        padding: 0 6px;\n    }\n}\n`;\nCustomMenuItem.propTypes = MenuItem.propTypes;\nCustomMenuItem.defaultProps = MenuItem.defaultProps;\n```\n\n## Usage\n\n### Dropdown\n\n```jsx\n\u003cDropdown\n    onSelect={(eventKey) =\u003e {\n    }}\n\u003e\n    \u003cDropdown.Toggle\n        btnStyle=\"flat\"\n    \u003e\n        Toggler\n    \u003c/Dropdown.Toggle\u003e\n    \u003cDropdown.Menu\u003e\n        \u003cMenuItem header\u003eHeader\u003c/MenuItem\u003e\n        \u003cMenuItem eventKey={1}\u003elink\u003c/MenuItem\u003e\n        \u003cMenuItem divider /\u003e\n        \u003cMenuItem header\u003eHeader\u003c/MenuItem\u003e\n        \u003cMenuItem eventKey={2}\u003elink\u003c/MenuItem\u003e\n        \u003cMenuItem eventKey={3} disabled\u003edisabled\u003c/MenuItem\u003e\n        \u003cMenuItem\n            eventKey={4}\n            title=\"link with title\"\n        \u003e\n            link with title\n        \u003c/MenuItem\u003e\n        \u003cMenuItem\n            eventKey={5}\n            active\n            onSelect={(eventKey) =\u003e {\n                alert(`Alert from menu item.\\neventKey: ${eventKey}`);\n            }}\n        \u003e\n            link that alerts\n        \u003c/MenuItem\u003e\n    \u003c/Dropdown.Menu\u003e\n\u003c/Dropdown\u003e\n```\n\n### Multi-Level Dropdown\n\n```jsx\n\u003cDropdown\u003e\n    \u003cDropdown.Toggle title=\"Select an option\" /\u003e\n    \u003cDropdown.Menu\u003e\n        \u003cMenuItem\u003e\n            Menu item one\n        \u003c/MenuItem\u003e\n        \u003cMenuItem\u003e\n            Menu item two\n        \u003c/MenuItem\u003e\n        \u003cMenuItem\u003e\n            Menu item three\n        \u003c/MenuItem\u003e\n        \u003cMenuItem divider /\u003e\n        \u003cMenuItem\u003e\n            Menu item four\n            \u003cMenuItem\u003e\n                Second level item one\n            \u003c/MenuItem\u003e\n            \u003cMenuItem\u003e\n                Second level item two\n            \u003c/MenuItem\u003e\n            \u003cMenuItem\u003e\n                Second level item three\n                \u003cMenuItem\u003e\n                    Third level item one\n                \u003c/MenuItem\u003e\n            \u003c/MenuItem\u003e\n        \u003c/MenuItem\u003e\n    \u003c/Dropdown.Menu\u003e\n\u003c/Dropdown\u003e\n```\n\n### Dropdown Menu Wrapper\n\n```jsx\n\u003cDropdown\u003e\n    \u003cDropdown.Toggle title=\"Select an option\" /\u003e\n    \u003cDropdown.MenuWrapper\u003e\n        \u003cSearchFilter /\u003e\n        \u003cDropdown.Menu\u003e\n            \u003cMenuItem\u003e\n                Menu item one\n            \u003c/MenuItem\u003e\n            \u003cMenuItem\u003e\n                Menu item two\n            \u003c/MenuItem\u003e\n            \u003cMenuItem\u003e\n                Menu item three\n            \u003c/MenuItem\u003e\n        \u003c/Dropdown.Menu\u003e\n    \u003c/Dropdown.MenuWrapper\u003e\n\u003c/Dropdown\u003e\n```\n\n### Dropdown Button\n\n```jsx\n\u003cDropdownButton\n    btnSize=\"xs\"\n    title=\"More\"\n    onSelect={(eventKey) =\u003e {\n    }}\n\u003e\n    \u003cMenuItem eventKey={1}\u003elink\u003c/MenuItem\u003e\n    \u003cMenuItem eventKey={2}\u003elink\u003c/MenuItem\u003e\n\u003c/DropdownButton\u003e\n```\n\n## API\n\n### Properties\n\n#### Dropdown\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | ButtonGroup | A custom element for this component.\ndropup | boolean | false | The menu will open above the dropdown button, instead of below it.\ndisabled | boolean | false | Whether or not component is disabled.\nopen | boolean | false | Whether or not the dropdown is visible.\nautoOpen | boolean | false | Whether to open the dropdown on mouse over.\npullRight | boolean | false | Align the menu to the right side of the dropdown toggle.\nonClose | function(event) | | A callback fired when the dropdown closes.\nonToggle | function(boolean) | | A callback fired when the dropdown wishes to change visibility. Called with the requested `open` value.\nonSelect | function(eventKey, event) | | A callback fired when a menu item is selected.\nrole | string | | If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button.\nrootCloseEvent | One of:\u003cbr/\u003e'click'\u003cbr/\u003e'mousedown' | | Which event when fired outside the component will cause it to be closed.\n\n#### DropdownToggle\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | Button | A custom element for this component.\nbtnSize | One of:\u003cbr/\u003e'lg'\u003cbr/\u003e'md'\u003cbr/\u003e'sm'\u003cbr/\u003e'xs' | 'md' |\nbtnStyle | One of:\u003cbr/\u003e'default'\u003cbr/\u003e'primary'\u003cbr/\u003e'emphasis'\u003cbr/\u003e'flat'\u003cbr/\u003e'link' | 'flat' |\nnoCaret | boolean | false | Whether to prevent a caret from being rendered next to the title.\ntitle | node | | Title content.\ndisabled | boolean | false | Whether or not component is disabled.\n\n#### DropdownMenu\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | ul | A custom element for this component.\nonClose | function(event) | | A callback fired when the dropdown menu closes.\nonSelect | function(eventKey, event) | | A callback fired when a menu item is selected.\nrootCloseEvent | One of:\u003cbr/\u003e'click'\u003cbr/\u003e'mousedown' | | Which event when fired outside the component will cause it to be closed.\n\n#### DropdownMenuWrapper\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | div | A custom element for this component.\nonClose | function(event) | | A callback fired when the dropdown menu closes.\nonSelect | function(eventKey, event) | | A callback fired when a menu item is selected.\nrootCloseEvent | One of:\u003cbr/\u003e'click'\u003cbr/\u003e'mousedown' | | Which event when fired outside the component will cause it to be closed.\n\n#### MenuItem\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | Button | A custom element for this component.\nactive | boolean | false | Highlight the menu item as active.\ndisabled | boolean | false | Disable the menu item, making it unselectable.\ndivider | boolean | false | Style the menu item as a horizontal rule, providing visual separation between groups of menu items.\neventKey | any | | Value passed to the `onSelect` handler, useful for identifying the selected menu item.\nheader | boolean | false | Style the menu item as a header label, useful for describing a group of menu items.\nonClick | function(event) | | Callback fired when the menu item is clicked, even if it is disabled.\nopen | boolean | false | Whether or not the dropdown submenu is visible.\nonClose | function(event) | | A callback fired when the dropdown menu closes.\nonSelect | function(eventKey, event) | | A callback fired when a menu item is selected.\nrootCloseEvent | One of:\u003cbr/\u003e'click'\u003cbr/\u003e'mousedown' | | Which event when fired outside the component will cause it to be closed.\n\n#### DropdownButton\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | ButtonGroup | A custom element for this component.\ndropup | boolean | false | The menu will open above the dropdown button, instead of below it.\ndisabled | boolean | false | Whether or not component is disabled.\npullRight | boolean | false | Align the menu to the right side of the dropdown toggle.\nopen | boolean | false | Whether or not the dropdown is visible.\nonClose | function(event) | | A callback fired when the dropdown closes.\nonToggle | function(boolean) | | A callback fired when the dropdown wishes to change visibility. Called with the requested `open` value.\nonSelect | function(eventKey, event) | | A callback fired when a menu item is selected.\nrole | string | | If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button.\nrootCloseEvent | One of:\u003cbr/\u003e'click'\u003cbr/\u003e'mousedown' | | Which event when fired outside the component will cause it to be closed.\nbtnSize | One of:\u003cbr/\u003e'lg'\u003cbr/\u003e'md'\u003cbr/\u003e'sm'\u003cbr/\u003e'xs' | 'md' |\nbtnStyle | One of:\u003cbr/\u003e'default'\u003cbr/\u003e'primary'\u003cbr/\u003e'emphasis'\u003cbr/\u003e'flat'\u003cbr/\u003e'link' | 'flat' |\ntitle | node | | Title content.\nnoCaret | boolean | false | Whether to prevent a caret from being rendered next to the title.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendmicro-frontend%2Freact-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-dropdown/lists"}