React Suite Dropdown Trigger

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

In this article, we’ll learn about React suite dropdown trigger. A dropdown trigger sets the trigger event with the trigger attribute and supports the event which can be a click(default), hover, or contextMenu.

Syntax:

// Import Statement
import { Dropdown} from "rsuite/";

// App.Js File
Function App() {
   return (
       <Dropdown>
            <Dropdown.Item trigger="hover || contextMenu 
                || click">...</Dropdown.Item>
         </Dropdown>
   );
}

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:

Example 1: Below example demonstrates the dropdown “click” trigger event.

Here, the dropdown lists the menu items after clicking the dropdown button.

Javascript

import "rsuite/dist/rsuite.min.css";
import { Dropdown } from "rsuite";

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

        <div style={{ marginTop: 20, width: 340 }}>
          <Dropdown title="Courses" trigger="click">
            <Dropdown.Item>Java</Dropdown.Item>
            <Dropdown.Item>C++</Dropdown.Item>
            <Dropdown.Item>DSA Self paced</Dropdown.Item>
          </Dropdown>
        </div>
      </div>
    </center>
  );
}

Output:

Example 2: Below example demonstrates the dropdown “hover” trigger event.

Here, the dropdown lists the menu items after hovering over the dropdown button.

Javascript

import "rsuite/dist/rsuite.min.css";
import { Dropdown } from "rsuite";

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

        <div style={{ marginTop: 20, width: 340 }}>
          <Dropdown title="Courses" trigger="hover">
            <Dropdown.Item>Java</Dropdown.Item>
            <Dropdown.Item>C++</Dropdown.Item>
            <Dropdown.Item>DSA Self paced</Dropdown.Item>
          </Dropdown>
        </div>
      </div>
    </center>
  );
}

Output:

Example 3: Below example demonstrates the dropdown “contextMenu” trigger event.

Here, the dropdown lists the menu items after right-clicking the dropdown button.

Javascript

import "rsuite/dist/rsuite.min.css";
import { Dropdown } from "rsuite";

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

        <div style={{ marginTop: 20, width: 340 }}>
          <Dropdown title="Courses (rightClick)" trigger="contextMenu">
            <Dropdown.Item>Java</Dropdown.Item>
            <Dropdown.Item>C++</Dropdown.Item>
            <Dropdown.Item>DSA Self paced</Dropdown.Item>
          </Dropdown>
        </div>
      </div>
    </center>
  );
}

Output:

Reference: https://rsuitejs.com/components/dropdown/#trigger