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:

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