React Suite Dropdown Custom Toggle

Last Updated : 28 Jun, 2022

React Suite is a popular front-end UI framework that consisted of a set of React components that we can use in our react application. It is developer-friendly and supports the stable releases of all the modern browsers like Chrome, Edge, Firefox, Safari, etc. In this article, we will discuss React Suite Dropdown Custom Toggle.

A dropdown component is used to show a large list of options to users from which users can select one or more options depending on the use case. Dropdown custom toggle means to toggle the dropdown using a custom action. The original select element will not be rendered on the frontend in this case, only the dropdown list will be shown once the dropdown is opened via custom action.

React Suite Dropdown Custom Toggle Components:

Dropdown: This component is used to show a dropdown element to the user.

React Suite Dropdown Custom Toggle Attributes/Props:

renderToggle: This attribute is used to set the custom toggle to the dropdown to any element.

Syntax:

<Dropdown renderToggle={...}>
    ...
</Dropdown>

Creating The React Application And Installing React Suite in the Project:

Step 1: Create the React application using the npx command:

npx create-react-app foldername

Step 2: After creating the project folder, move to it using the cd command:

cd foldername

Step 3: After creating the ReactJS application, Install the rsuite module so that we can use the Dropdown component using the following command:

npm install rsuite

Project Structure: After following the above steps, the project structure will look like this:

Let’s see some examples to understand how to use the React Suite Dropdown renderToggle attribute/prop.

Example 1: Now replace the code in the App.js file with the code below. In this example, we used the renderToggle attribute/prop of the Dropdown component to set a Button as a custom toggle.

App.js

import "rsuite/dist/rsuite.min.css"; 
import React from "react"; 
import { Button, Dropdown } from "rsuite"; 
  
function App() { 
  
    // Button to trigger Dropdown 
    const triggerButton = (props, ref) => { 
        return ( 
            <Button {...props} ref={ref} appearance="primary"> 
                Toggle Dropdown 
            </Button> 
        ); 
    }; 
  
    return ( 
  
        <div className="App" style= 
            {{ display: "flex", alignItems: "center",  
                flexDirection: "column" }}> 
            <header style={{ 
                textAlign: "center", display: "block", 
                marginBottom: "30px"
            }}> 
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3> 
                <h5>React Suite Dropdown Custom Toggle</h5> 
            </header> 
  
            {/* This dropdown will be toggled through  
            the custom button */} 
            <Dropdown renderToggle={triggerButton}> 
                <Dropdown.Item>Data Structures</Dropdown.Item> 
                <Dropdown.Item>Algorithms</Dropdown.Item> 
                <Dropdown.Item>Computer Networks</Dropdown.Item> 
                <Dropdown.Item>Computer Organisation</Dropdown.Item> 
            </Dropdown> 
        </div> 
    ); 
} 
  
export default App;

Run the Application: Run your app using the following command from the root directory of the project.

npm start

Output: Go to http://localhost:3000/ in your browser to see the output.

Example 2: In this example, we set an image as a custom toggle for a dropdown to show that any component can be used as a custom toggle.

App.js

import "rsuite/dist/rsuite.min.css"; 
import React from "react"; 
import { Dropdown } from "rsuite"; 
  
function App() { 
  
    // Image to use as a custom trigger for Dropdown 
    const triggerImage = (props, ref) => { 
        return ( 
            <img 
                {...props} 
                ref={ref} 
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220626081330/download-200x200.png"
            /> 
        ); 
    }; 
  
    return ( 
  
        <div className="App" style={{ 
            display: "flex", alignItems: "center", 
            flexDirection: "column"
        }}> 
            <header style={{ 
                textAlign: "center", display: "block", 
                marginBottom: "30px"
            }}> 
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3> 
                <h5>React Suite Dropdown Custom Toggle</h5> 
            </header> 
  
            {/* This dropdown will be toggled through  
            the custom image component */} 
            <Dropdown renderToggle={triggerImage}> 
                <Dropdown.Item>Data Structures</Dropdown.Item> 
                <Dropdown.Item>Algorithms</Dropdown.Item> 
                <Dropdown.Item>Computer Networks</Dropdown.Item> 
                <Dropdown.Item>Computer Organisation</Dropdown.Item> 
            </Dropdown> 
        </div> 
    ); 
} 
  
export default App;