React Suite Dropdown Extends button props

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 extended button props. As we know that the default value for toggling a Dropdown is Button but if we want to set the button sizes or appearance later then we can use extended props of button-like size, and appearance and then display it in button styles.

Syntax:

//Import Statement
import { Dropdown, ButtonToolbar } from "rsuite/";

//App.Js File
const CustomDropDown = (props) => (
    <Dropdown {...props} placement="bottomEnd">
        <Dropdown.Item>...</Dropdown.Item>
    </Dropdown>
);

Function App() {
    return (
        <ButtonToolbar>
            <CustomDropDown title="..." size="lg" />
        </ButtonToolbar>
    );
}

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 active 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 size extended prop of the dropdown button.

Javascript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Dropdown, ButtonToolbar } from "rsuite/";

const CustomDropDown = (props) => (
    <Dropdown {...props} placement="bottomEnd">
        <Dropdown.Item>Java</Dropdown.Item>
        <Dropdown.Item>C++</Dropdown.Item>
        <Dropdown.Item>Python</Dropdown.Item>
    </Dropdown>
);

export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Dropdown Extends Button props
                </h4>

                <div style={{ marginTop: 20 }}>
                    <ButtonToolbar>
                        <CustomDropDown title="Find Courses"
                                         size="lg" />
                    </ButtonToolbar>
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrates the appearance and size of extended props of the dropdown button.

Javascript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Dropdown, ButtonToolbar } from "rsuite/";

const CustomDropDown = (props) => (
    <Dropdown {...props} placement="bottomEnd">
        <Dropdown.Item>Java</Dropdown.Item>
        <Dropdown.Item>C++</Dropdown.Item>
        <Dropdown.Item>Python</Dropdown.Item>
    </Dropdown>
);

export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Dropdown Extends Button props
                </h4>

                <div style={{ marginTop: 20 }}>
                    <ButtonToolbar>
                        <CustomDropDown title="Buy online"
                            size="sm" appearance="primary" />
                    </ButtonToolbar>
                </div>
            </div>
        </center>
    );
}

Output:

Reference: https://rsuitejs.com/components/dropdown/#extends-button-props