trendmicro-frontend / React Dropdown
Licence: mit
React Dropdown component
Stars: ✭ 107
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Dropdown
Yndropdownmenu
✨ Awesome Dropdown menu for iOS with Swift 5.0
Stars: ✭ 1,259 (+1076.64%)
Mutual labels: dropdown
React Responsive Select
A customisable, touchable, React select / multi-select form control. Built with keyboard and screen reader accessibility in mind
Stars: ✭ 98 (-8.41%)
Mutual labels: dropdown
Igldropdownmenu
An iOS drop down menu with pretty animation and easy to customize.
Stars: ✭ 1,218 (+1038.32%)
Mutual labels: dropdown
Autocomplete
🔮 Fast and full-featured autocomplete library
Stars: ✭ 1,268 (+1085.05%)
Mutual labels: dropdown
Tippyjs React
React component for Tippy.js (official)
Stars: ✭ 1,081 (+910.28%)
Mutual labels: dropdown
React Input Enhancements
Set of enhancements for input control
Stars: ✭ 1,375 (+1185.05%)
Mutual labels: dropdown
React Native Picker Select
🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
Stars: ✭ 1,229 (+1048.6%)
Mutual labels: dropdown
Pretty Dropdowns
A simple, lightweight jQuery plugin to create stylized drop-down menus.
Stars: ✭ 96 (-10.28%)
Mutual labels: dropdown
Tippyjs
Tooltip, popover, dropdown, and menu library
Stars: ✭ 9,433 (+8715.89%)
Mutual labels: dropdown
React Categorized Tag Input
React.js component for making tag autocompletion inputs with categorized results.
Stars: ✭ 78 (-27.1%)
Mutual labels: dropdown
Ngx Select Dropdown
Custom Dropdown for Angular 4+ with multiple and single selection options
Stars: ✭ 91 (-14.95%)
Mutual labels: dropdown
Countrycity
🌎 Geodata API - Get countries, and cities to plug in a select drop-down.
Stars: ✭ 62 (-42.06%)
Mutual labels: dropdown
Bootstrap Select
🚀 The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Stars: ✭ 9,442 (+8724.3%)
Mutual labels: dropdown
React Native Modal Dropdown
A react-native dropdown/picker/selector component for both Android & iOS.
Stars: ✭ 1,103 (+930.84%)
Mutual labels: dropdown
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-20.56%)
Mutual labels: dropdown
Downshift
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
Stars: ✭ 10,183 (+9416.82%)
Mutual labels: dropdown
Multiselect
Vue 3 multiselect component with single select, multiselect and tagging options.
Stars: ✭ 92 (-14.02%)
Mutual labels: dropdown
react-dropdown
React Dropdown
Demo: https://trendmicro-frontend.github.io/react-dropdown
Installation
- Install the latest version of react and react-dropdown:
npm install --save react @trendmicro/react-dropdown
- At this point you can import
@trendmicro/react-dropdown
and its styles in your application as follows:
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
import '@trendmicro/react-buttons/dist/react-buttons.css';
export { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';
components/Dropdown/index.js
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:
import Dropdown from './components/Dropdown';
Custom Styling
You can make style changes using inline styles or styled-components, and specify propTypes and defaultProps by setting them as properties on the function.
Inline Styles
const CustomDropdownMenu = (props) => (
<Dropdown.Menu {...props} style={{ padding: '2px 0' }} />
);
CustomDropdownMenu.propTypes = Dropdown.Menu.propTypes;
CustomDropdownMenu.defaultProps = Dropdown.Menu.defaultProps;
Styled Components
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:
const CustomMenuItem = styled(MenuItem)`
&& {
a {
&:hover {
background: ${styleConstants.selectionColor};
}
padding: 0 6px;
}
}
`;
CustomMenuItem.propTypes = MenuItem.propTypes;
CustomMenuItem.defaultProps = MenuItem.defaultProps;
Usage
Dropdown
<Dropdown
onSelect={(eventKey) => {
}}
>
<Dropdown.Toggle
btnStyle="flat"
>
Toggler
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem header>Header</MenuItem>
<MenuItem eventKey={1}>link</MenuItem>
<MenuItem divider />
<MenuItem header>Header</MenuItem>
<MenuItem eventKey={2}>link</MenuItem>
<MenuItem eventKey={3} disabled>disabled</MenuItem>
<MenuItem
eventKey={4}
title="link with title"
>
link with title
</MenuItem>
<MenuItem
eventKey={5}
active
onSelect={(eventKey) => {
alert(`Alert from menu item.\neventKey: ${eventKey}`);
}}
>
link that alerts
</MenuItem>
</Dropdown.Menu>
</Dropdown>
Multi-Level Dropdown
<Dropdown>
<Dropdown.Toggle title="Select an option" />
<Dropdown.Menu>
<MenuItem>
Menu item one
</MenuItem>
<MenuItem>
Menu item two
</MenuItem>
<MenuItem>
Menu item three
</MenuItem>
<MenuItem divider />
<MenuItem>
Menu item four
<MenuItem>
Second level item one
</MenuItem>
<MenuItem>
Second level item two
</MenuItem>
<MenuItem>
Second level item three
<MenuItem>
Third level item one
</MenuItem>
</MenuItem>
</MenuItem>
</Dropdown.Menu>
</Dropdown>
Dropdown Menu Wrapper
<Dropdown>
<Dropdown.Toggle title="Select an option" />
<Dropdown.MenuWrapper>
<SearchFilter />
<Dropdown.Menu>
<MenuItem>
Menu item one
</MenuItem>
<MenuItem>
Menu item two
</MenuItem>
<MenuItem>
Menu item three
</MenuItem>
</Dropdown.Menu>
</Dropdown.MenuWrapper>
</Dropdown>
Dropdown Button
<DropdownButton
btnSize="xs"
title="More"
onSelect={(eventKey) => {
}}
>
<MenuItem eventKey={1}>link</MenuItem>
<MenuItem eventKey={2}>link</MenuItem>
</DropdownButton>
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].