React Suite is a front-end library designed for the middle platform and back-end products. The React Suite Dropdown provides navigation that uses a select picker in order to select a value.
React Suite <Dropdown> Props List:
- activeKey: It takes a string value, corresponding to eventKey in the <Dropdown.Item>.
- classPrefix: It denotes the prefix of the component CSS class. Specifying any value that will change the name of the class of the Component. This can be useful for applying custom styling based on the class name. The default value is “dropdown”.
- defaultOpen: It is a boolean value. It denotes whether the Dropdown is initially open or not. It is false by default.
- disabled: It is a boolean value. It denotes whether the Dropdown is disabled or not.
- icon: It sets the icon.
- menuStyle: We write the CSS Properties. It defines the style of the menu.
- onClose: A void Callback function when the menu closes.
- onOpen: A void Callback function when the menu closes.
- onSelect: A void Selected callback function when any option is selected.
- onToggle: A void callback function for menu state switching.
- open: It is a boolean value. It denotes whether the Dropdown is open or not. It is true by default.
- placement: It defines the position of the Dropdown menu. It takes these values ‘bottomStart’,’bottomEnd,’topStart’ , ‘topEnd’ , ‘leftStart’ ,’leftEnd’ , ‘rightStart’ and ‘rightEnd’;
- renderToggle: Custom Toggle.
- title: It defines the title of the dropdown.
- toggleAs: It denotes the element type of the component. It is ‘Button’ by default but one can custom the element for this component.
- toggleClassName: It denotes a CSS class to apply to the Toggle DOM node.
- trigger: It represents Triggering events. It takes these values – ‘click’ ,’hover’ ,’contextMenu’ , Array<‘click’ , ‘hover’ ,’contextMenu’>.
Syntax:
<Dropdown></Dropdown>
Prerequisite: Introduction and installation ReactJS
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install rsuite
Project Structure: It will look like this:
Example 1: We are importing the Dropdown Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.
We are adding three Dropdown Components. In the first one, we are passing the values to the title, activeKey, placement, onSelect which calls the onSelectHandle which shows the eventKey selected in the alert, onClose which calls the onCloseHandle that shows “Close: closable !” in the alert. In the second dropdown component, we are passing the disabled prop and the icon prop. For the third dropdown component, we are passing the open, toggleAs, and menuStyle props.
import { Dropdown } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import { Block } from "@rsuite/icons";
function App() {
const onSelectHandle = (e) => {
alert(e);
};
const onCloseHandle = () => {
alert("Close : onCloseHandler !");
};
return (
<div className="App">
<h4>React Suite Dropdown Prop</h4>
<Dropdown
title="Geeksforgeeks"
onSelect={onSelectHandle}
onClose={onCloseHandle}
activeKey="Problems"
placement="bottomStart"
>
<Dropdown.Item eventKey="Articles">
Articles
</Dropdown.Item>
<Dropdown.Item eventKey="Problems">
Problems
</Dropdown.Item>
<Dropdown.Item eventKey="Interview Preparation">
Interview Preparation
</Dropdown.Item>
<Dropdown.Item eventKey="Contests">
Contests
</Dropdown.Item>
</Dropdown>
<Dropdown title="disabled" disabled icon={<Block />}>
<Dropdown.Item eventKey="Articles">
Articles
</Dropdown.Item>
</Dropdown>
<Dropdown
title="open-dropdown"
open
toggleAs="a"
menuStyle={{ border: "2px solid blue" }}
>
<Dropdown.Item eventKey="Articles">
Articles
</Dropdown.Item>
<Dropdown.Item eventKey="Problems">
Problems
</Dropdown.Item>
<Dropdown.Item eventKey="Interview Preparation">
Interview Preparation
</Dropdown.Item>
</Dropdown>
</div>
);
} export default App;
|
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: We are adding the Dropdown Component with the title as “Geeksforgeeks”, trigger as “hover”, classPrefix as “btn”, passing renderToggle with a div having some style and defaultOpen prop.
import { Dropdown } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import { Block } from "@rsuite/icons";
function App() {
return (
<div className="App">
<h4>React Suite Dropdown Prop</h4>
<Dropdown
title="Geeksforgeeks"
trigger="hover"
classPrefix="btn"
defaultOpen
renderToggle={() => (
<div
style={{
backgroundColor: "green",
padding: 8,
color: "white",
}}
>
<h4>Geeksforgeeks</h4>
</div>
)}
>
<Dropdown.Item eventKey="Articles">
Articles
</Dropdown.Item>
<Dropdown.Item eventKey="Problems">
Problems
</Dropdown.Item>
<Dropdown.Item eventKey="Interview Preparation">
Interview Preparation
</Dropdown.Item>
<Dropdown.Item eventKey="Contests">
Contests
</Dropdown.Item>
</Dropdown>
</div>
);
} export default App;
|
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://rsuitejs.com/components/dropdown/#code-lt-dropdown-gt-code