React Suite Dropdown Component
Last Updated :
11 Apr, 2022
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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...