react-dropdown

React Dropdown

Demo: https://trendmicro-frontend.github.io/react-dropdown

Installation

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:

1import Dropdown, {
2    DropdownToggle,
3    DropdownMenu,
4    DropdownMenuWrapper,
5    MenuItem,
6    DropdownButton
7} from '@trendmicro/react-dropdown';
8
9// Be sure to include styles at some point, probably during your bootstraping
10import '@trendmicro/react-buttons/dist/react-buttons.css';
11import '@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

1import '@trendmicro/react-buttons/dist/react-buttons.css';
2
3export { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';

components/Dropdown/index.js

1import '@trendmicro/react-dropdown/dist/react-dropdown.css';
2import Dropdown from '@trendmicro/react-dropdown';
3import '../Buttons'; // Ensure CSS dependency
4
5export default Dropdown;
6export {
7    DropdownToggle,
8    DropdownMenu,
9    DropdownMenuWrapper,
10    MenuItem,
11    DropdownButton
12} from '@trendmicro/react-dropdown';

Then, import Dropdown component in your code:

1import 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

1const CustomDropdownMenu = (props) => (
2    <Dropdown.Menu {...props} style={{ padding: '2px 0' }} />
3);
4CustomDropdownMenu.propTypes = Dropdown.Menu.propTypes;
5CustomDropdownMenu.defaultProps = Dropdown.Menu.defaultProps;

Styled Components

1const CustomDropdownMenu = styled(Dropdown.Menu)`
2    padding: 2px 0;
3`;
4CustomDropdownMenu.propTypes = Dropdown.Menu.propTypes;
5CustomDropdownMenu.defaultProps = Dropdown.Menu.defaultProps;

To increase the CSS specificity of a rule, you can simply repeat a selector, like so:

1const CustomMenuItem = styled(MenuItem)`
2&& {
3    a {
4        &:hover {
5            background: ${styleConstants.selectionColor};
6        }
7        padding: 0 6px;
8    }
9}
10`;
11CustomMenuItem.propTypes = MenuItem.propTypes;
12CustomMenuItem.defaultProps = MenuItem.defaultProps;

Usage

Dropdown

1<Dropdown
2    onSelect={(eventKey) => {
3    }}
4>
5    <Dropdown.Toggle
6        btnStyle="flat"
7    >
8        Toggler
9    </Dropdown.Toggle>
10    <Dropdown.Menu>
11        <MenuItem header>Header</MenuItem>
12        <MenuItem eventKey={1}>link</MenuItem>
13        <MenuItem divider />
14        <MenuItem header>Header</MenuItem>
15        <MenuItem eventKey={2}>link</MenuItem>
16        <MenuItem eventKey={3} disabled>disabled</MenuItem>
17        <MenuItem
18            eventKey={4}
19            title="link with title"
20        >
21            link with title
22        </MenuItem>
23        <MenuItem
24            eventKey={5}
25            active
26            onSelect={(eventKey) => {
27                alert(`Alert from menu item.\neventKey: ${eventKey}`);
28            }}
29        >
30            link that alerts
31        </MenuItem>
32    </Dropdown.Menu>
33</Dropdown>

Multi-Level Dropdown

1<Dropdown>
2    <Dropdown.Toggle title="Select an option" />
3    <Dropdown.Menu>
4        <MenuItem>
5            Menu item one
6        </MenuItem>
7        <MenuItem>
8            Menu item two
9        </MenuItem>
10        <MenuItem>
11            Menu item three
12        </MenuItem>
13        <MenuItem divider />
14        <MenuItem>
15            Menu item four
16            <MenuItem>
17                Second level item one
18            </MenuItem>
19            <MenuItem>
20                Second level item two
21            </MenuItem>
22            <MenuItem>
23                Second level item three
24                <MenuItem>
25                    Third level item one
26                </MenuItem>
27            </MenuItem>
28        </MenuItem>
29    </Dropdown.Menu>
30</Dropdown>

Dropdown Menu Wrapper

1<Dropdown>
2    <Dropdown.Toggle title="Select an option" />
3    <Dropdown.MenuWrapper>
4        <SearchFilter />
5        <Dropdown.Menu>
6            <MenuItem>
7                Menu item one
8            </MenuItem>
9            <MenuItem>
10                Menu item two
11            </MenuItem>
12            <MenuItem>
13                Menu item three
14            </MenuItem>
15        </Dropdown.Menu>
16    </Dropdown.MenuWrapper>
17</Dropdown>

Dropdown Button

1<DropdownButton
2    btnSize="xs"
3    title="More"
4    onSelect={(eventKey) => {
5    }}
6>
7    <MenuItem eventKey={1}>link</MenuItem>
8    <MenuItem eventKey={2}>link</MenuItem>
9</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