React Suite Dropdown Placement
Last Updated :
13 Jun, 2022
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 placement. The dropdowns can be placed in 8 positions i.e, topStart, topEnd, leftStart, leftEnd, bottomStart, bottomEnd, rightStart, and rightEnd.
Syntax:
// Import Statement
import { Dropdown } from "rsuite/";
// App.Js File
Function App() {
return (
<Dropdown placement="topStart">
<Dropdown.Item key={1}>...</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 activate 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 topEnd, topStart, bottomStart, bottomEnd placement.
Javascript
import React from "react" ;
import "rsuite/dist/rsuite.min.css" ;
import { Dropdown } from "rsuite/" ;
const DropItems = [
<Dropdown.Item key={1}>Tutorials</Dropdown.Item>,
<Dropdown.Item key={2}>Practice</Dropdown.Item>,
<Dropdown.Item key={3}>Jobs</Dropdown.Item>,
];
export default function App() {
return (
<center>
<div style={{ padding: 20 }}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Dropdown Placement</h4>
<div style={{ marginTop: 50, padding: 30,
backgroundColor: 'green' , width: 600 }}>
<Dropdown title= "topStart" placement= "topStart"
style={{ marginRight: 10 }}>
{DropItems}
</Dropdown>
<Dropdown title= "topEnd" placement= "topEnd"
style={{ marginRight: 10 }}>
{DropItems}
</Dropdown>
<Dropdown title= "bottomStart" placement= "bottomStart"
style={{ marginRight: 10 }}>
{DropItems}
</Dropdown>
<Dropdown title= "bottomEnd" placement= "bottomEnd"
style={{ marginRight: 10 }}>
{DropItems}
</Dropdown>
</div>
</div>
</center>
);
}
|
Output:
Example 2: Below example demonstrates the hoverable dropdown leftEnd, leftStart, rightStart, rightEnd placement.
Javascript
import React from "react" ;
import "rsuite/dist/rsuite.min.css" ;
import { Dropdown } from "rsuite/" ;
const DropItems = [
<Dropdown.Item key={1}>Tutorials</Dropdown.Item>,
<Dropdown.Item key={2}>Practice</Dropdown.Item>,
<Dropdown.Item key={3}>Jobs</Dropdown.Item>,
];
export default function App() {
return (
<center>
<div style={{ padding: 20 }}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Dropdown Placement</h4>
<div style={{ marginTop: 50, padding: 30,
backgroundColor: 'lightblue' , width: 1000 }}>
<Dropdown title= "leftStart hover" trigger= "hover"
placement= "leftStart"
style={{ marginRight: 10 }}>
{DropItems}
</Dropdown>
<Dropdown title= "leftEnd hover" trigger= "hover"
placement= "leftEnd"
style={{ marginRight: 10 }}>
{DropItems}
</Dropdown>
<Dropdown title= "rightStart hover" trigger= "hover"
placement= "rightStart"
style={{ marginRight: 10 }}>
{DropItems}
</Dropdown>
<Dropdown title= "rightEnd hover" trigger= "hover"
placement= "rightEnd" >
{DropItems}
</Dropdown>
</div>
</div>
</center>
);
}
|
Output:
Reference: https://rsuitejs.com/components/dropdown/#placement
Share your thoughts in the comments
Please Login to comment...