React Dropdown component
npm install @trendmicro/react-dropdown
React Dropdown
Demo: https://trendmicro-frontend.github.io/react-dropdown
1. Install the latest version of react and 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';
`
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';
You can make style changes using inline styles or styled-components, and specify propTypes and defaultProps by setting them as properties on the function.
jsx
const CustomDropdownMenu = (props) => (
);
CustomDropdownMenu.propTypes = Dropdown.Menu.propTypes;
CustomDropdownMenu.defaultProps = Dropdown.Menu.defaultProps;
`$3
`jsx
const CustomDropdownMenu = styled(Dropdown.Menu);
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);
CustomMenuItem.propTypes = MenuItem.propTypes;
CustomMenuItem.defaultProps = MenuItem.defaultProps;
`Usage
$3
`jsx
onSelect={(eventKey) => {
}}
>
btnStyle="flat"
>
Toggler
eventKey={4}
title="link with title"
>
link with title
eventKey={5}
active
onSelect={(eventKey) => {
alert(Alert from menu item.\neventKey: ${eventKey});
}}
>
link that alerts
`$3
`jsx
`$3
`jsx
Menu item one
Menu item two
Menu item three
`$3
`jsx
btnSize="xs"
title="More"
onSelect={(eventKey) => {
}}
>
link
link
`API
$3
#### 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.MIT