ReactJS Reactstrap ButtonDropdown Component

Last Updated : 07 Mar, 2024

Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The ButtonDropdown component is used to render a group or split button dropdown bootstrap component. We can use the following approach in ReactJS to use the ReactJS Reactstrap ButtonDropdown Component.

ButtonDropdown Props:

disabled: It is used to indicate whether the component is disabled or not.
direction: It is used to denote the direction of the elements like left, right, etc.
group: It is used to indicate whether to apply the group class or not.
isOpen: It is used to indicate whether it is in an open state or not.
tag: It is used to denote the tag props for this component.
toggle: It is a callback function that is triggered on the toggle of this component.

DropdownToggle Props:

caret: It is used to indicate whether to apply the caret class or not.
color: It is used to denote the color of the component.
disabled: It is used to indicate whether the component is disabled or not.
onClick: It is a callback function that is triggered on click of this component.
data-toggle: It is used to indicate whether to apply the data-toggle class or not.
aria-haspopup: It is used to indicate whether to apply the aria-haspopup class or not.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install reactstrap bootstrap

Project Structure: It will look like the following.

Example 1: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

JavaScript

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    DropdownMenu, DropdownItem,
    ButtonDropdown, DropdownToggle
} from "reactstrap"

function App() {

    // ButtonDropdown open state
    const [dropdownOpen, setOpen] = React.useState(false);

    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap ButtonDropdown Component</h4>
            <ButtonDropdown toggle={() => { setOpen(!dropdownOpen) }}
                isOpen={dropdownOpen}>
                <DropdownToggle className="bg-primary" caret>
                    Sample Button Dropdown
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem header>Numeric Characters
                    </DropdownItem>
                    <DropdownItem>One</DropdownItem>
                    <DropdownItem>Two</DropdownItem>
                    <DropdownItem>Three</DropdownItem>
                    <DropdownItem>Four</DropdownItem>
                    <DropdownItem>Five</DropdownItem>
                    <DropdownItem>Six</DropdownItem>
                    <DropdownItem>Seven</DropdownItem>
                    <DropdownItem>Eight</DropdownItem>
                    <DropdownItem>Nine</DropdownItem>
                    <DropdownItem>Zero</DropdownItem>
                </DropdownMenu>
            </ButtonDropdown>
        </div >
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: Now write down the following code in the App.js file. Here we have shown the dropdown component with the use of Header, Active, Disabled, and divider props.

JavaScript

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    DropdownMenu, DropdownItem,
    ButtonDropdown, DropdownToggle
} from "reactstrap"

function App() {

    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap ButtonDropdown Component</h4>
            <ButtonDropdown isOpen={true}>
                <DropdownToggle className="bg-secondary">
                    Different Props Applied</DropdownToggle>
                <DropdownMenu>
                    <DropdownItem header>Header Item</DropdownItem>
                    <DropdownItem active>Active Item</DropdownItem>
                    <DropdownItem disabled>Disabled Item</DropdownItem>
                    <DropdownItem divider>Divider Item</DropdownItem>
                </DropdownMenu>
            </ButtonDropdown>
        </div >
    );
}

export default App;