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:

`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, and specify propTypes and defaultProps by setting them as properties on the function.

$3


`jsx
const CustomDropdownMenu = (props) => (

);
CustomDropdownMenu.propTypes = Dropdown.Menu.propTypes;
CustomDropdownMenu.defaultProps = Dropdown.Menu.defaultProps;
`

$3

`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

$3

`jsx
onSelect={(eventKey) => {
}}
>
btnStyle="flat"
>
Toggler


Header
link

Header
link
disabled
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




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





`

$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.
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