React Suite Dropdown Placement
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>w3wiki</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>w3wiki</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