React Suite Dropdown Component

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Dropdown component allows the user to provide navigation that uses a select picker if you want to select a value. We can use the following approach in ReactJS to use the React Suite Dropdown Component.

Dropdown Props:

• activeKey: It is used to set the option to activate the state which corresponds to the event key in the Dropdown.item component.
• classPrefix: It is used to denote the prefix of the component CSS class.
• disabled: It is used to indicate whether the component is disabled or not.
• icon: It is used to set the icon.
• menuStyle: It is used to denote the style of the menu.
• onClose: It is a function that is triggered at the close of the menu.
• onOpen: It is a function that is triggered on the open of the menu.
• onSelect: It is a function that is triggered on select of a menu item.
• onToggle: It is a function that is triggered on menu state switching.
• open: It is used to denote the controlled open state.
• placement: It is used for the placement of the Menu.
• renderTitle: It is used to denote the custom title
• title: The menu defaults to display content.
• toggleClassName: It is used to denote a CSS class to apply to the Toggle DOM node
• toggleComponentClass: It can be used as a custom element for this component.
• trigger: It is used for the Triggering events.

Dropdown.Item Props:

• active: It is used to make the state active for the current option.
• children: It is used to denote the primary content.
• classPrefix: It is used to denote the prefix of the component CSS class.
• componentClass: It can be used as a custom element type for this component.
• disabled: It is used to disable the current option.
• divider: It is used to indicate whether to display the divider.
• eventKey: It is used to denote the value of the current option.
• icon: It is used to set the icon.
• onSelect: It is a function that is triggered on select of current option.
• panel: It is used to display a custom panel.
• renderItem: It is used for the custom rendering item.

Dropdown.Menu Props:

• icon: It is used to set the icon.
• pullLeft: It is used for making the submenu expand from the left and default to the right.
• title: It is used to define the title as a submenu.

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command:

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command:

  cd foldername

• Step 3: After creating the ReactJS application, Install the required module using the following command:

  npm install rsuite

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Dropdown } from 'rsuite';

export default function App() {

  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React Suite Dropdown Component</h4>
      <Dropdown title="Select Weekday">
        <Dropdown.Item>Monday</Dropdown.Item>
        <Dropdown.Item>Tuesday</Dropdown.Item>
        <Dropdown.Item>Wednesday</Dropdown.Item>
        <Dropdown.Item>Thursday</Dropdown.Item>
        <Dropdown.Item>Friday</Dropdown.Item>
        <Dropdown.Item>Saturday</Dropdown.Item>
        <Dropdown.Item>Sunday</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

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