React Suite Dropdown Used with Buttons

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers that provide pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite dropdown used with buttons. The menu of the dropdown can also be created using a Button component.

Dropdown Props:

• activeKey: This is used to set the option to activate the state which corresponds to the event key in the Dropdown.item component.
• classPrefix: This is used to denote the prefix of the component CSS class.
• disabled: This is used to indicate whether the component is disabled or not.
• icon: This is used to set the icon.
• menuStyle: This is used to change the style of the menu.
• onClose: This is a menu close callback function.
• onOpen: This is a menu open callback function.
• onSelect: This is a selected callback function.
• onToggle: This is a Callback function for menu state switching.
• open: This tells whether the dropdown is open.
• placement: This is used for the placement of the Menu.
• renderToggle: This is used to denote the custom title
• title: The menu defaults to display content.
• toggleAs: This helps in using a custom element for this component.
• toggleClassName: This is used to apply CSS to the Toggle DOM node
• trigger: This is used for the Triggering events.

Dropdown.Item Props:

• active: This is used to active the current option.
• as: This helps in using a custom element type for this component.
• classPrefix: This is used to denote the prefix of the component CSS class.
• disabled: This is used to disable the current option.
• divider: This is used to display the divider.
• eventKey: This is used to denote the value of the current option.
• icon: This is used to set the icon.
• onSelect: This selects a callback function for the current option.
• panel: This is used to display a custom panel.

Dropdown.Menu Props:

• icon: This is used to set the icon.
• title: This is used to define the title as a submenu.

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Syntax:

// Import Statement
import { Popover, Whisper, Dropdown, Button } from "rsuite/";

// App.Js File
const renderMenu = () => {
  return (
    <Popover>
      <Dropdown.Menu>
          <Dropdown.Item eventKey={1}>...</Dropdown.Item>
      </Dropdown.Menu>
    </Popover>
  );
};

Function App () {
return (
   <Whisper>
     <Button appearance="primary" color="green">
       ...
     </Button>
   </Whisper>
 );
}

Example 1: Below example demonstrates a dropdown using a basic button.

Javascript

//Apps.js File

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Popover, Whisper, Dropdown,
    Button } from "rsuite/";

const renderMenu = ({ left, top, className }, ref) => {

    return (
        <Popover ref={ref}
            className={className}
            style={{ left, top }} full>
            <Dropdown.Menu title="Create new file">
                <Dropdown.Item eventKey={1}>
                    Create new
                </Dropdown.Item>
                <Dropdown.Item eventKey={2}>
                    Export file
                </Dropdown.Item>
                <Dropdown.Item eventKey={3}>
                    Download file
                </Dropdown.Item>
            </Dropdown.Menu>
        </Popover>
    );
};

export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Dropdown used with Button
                </h4>

                <Whisper placement="bottomStart"
                    trigger="click" speaker={renderMenu}>
                    <Button appearance="primary" color="green">
                        Select Option
                    </Button>
                </Whisper>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrates a dropdown using Button with Icons.

Javascript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import PageIcon from '@rsuite/icons/Page';
import FileDownloadIcon from '@rsuite/icons/FileDownload';
import DetailIcon from '@rsuite/icons/Detail';
import { Popover, Whisper, Dropdown,
    IconButton } from "rsuite/";

const renderMenu = ({ left, top, className }, ref) => {
    return (
        <Popover ref={ref} className={className}
            style={{ left, top }} full>
            <Dropdown.Menu title="Create new file">
                <Dropdown.Item icon={<PageIcon />}
                    eventKey={1}>Create new file
                </Dropdown.Item>
                <Dropdown.Item icon={<FileDownloadIcon />}
                    eventKey={2}>Export file
                </Dropdown.Item>
                <Dropdown.Item icon={<DetailIcon />}
                    eventKey={3}>Download file
                </Dropdown.Item>
            </Dropdown.Menu>
        </Popover>
    );
};

export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Dropdown used with Button
                </h4>

                <Whisper placement="bottomStart"
                    trigger="click" speaker={renderMenu}>
                    <IconButton appearance="primary"
                        color="blue" icon={<PageIcon />}>
                        Create new
                    </IconButton>
                </Whisper>
            </div>
        </center>
    );
}

Output:

Reference: https://rsuitejs.com/components/dropdown/#used-with-buttons