How to create Bluetooth toggle button in ReactJS?

Last Updated : 04 Dec, 2023

The Bluetooth Toggle button is a component in Material UI for React that allows users to easily turn Bluetooth on and off. Integrating this component into a ReactJS application is straightforward, and the following approach can be employed.

Prerequisites:

Approach:

Manage State:
- Employ the useState hook to handle the state of the Bluetooth toggle button. Begin with an initial state of false to represent the off state.

Toggle Functionality:
- Create a function (handleToggleEvent) responsible for toggling the state when the user interacts with the Bluetooth switch. Connect this function to the onChange event of the Material-UI Switch component.
User Interface Integration:
- Integrate Material-UI components, including List, ListItem, Switch, and BluetoothIcon, to craft a seamless Bluetooth toggle button interface. Additionally, display the current Bluetooth state beneath the toggle button using a header.

Steps to create 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 material-ui module using the following command.

npm install @material-ui/core
npm install @material-ui/icons

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

Javascript

import React from "react";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import BluetoothIcon from "@material-ui/icons/Bluetooth";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import Switch from "@material-ui/core/Switch";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItem from "@material-ui/core/ListItem";
import List from "@material-ui/core/List";
 
export default function App() {
    const [isChecked, setIsChecked] = React.useState(false);
 
    const handleToggleEvent = () => {
        setIsChecked(!isChecked);
    };
 
    return (
        <div
            style={{
                display: "block",
                padding: 30,
            }}
        >
            <h4>How to create Bluetooth Toggle Button in ReactJS?</h4>
            <List
                subheader={
                    <ListSubheader>Mobile Bluetooth Settings</ListSubheader>
                }
                style={{
                    width: 200,
                }}
            >
                <ListItem>
                    <ListItemIcon>
                        <BluetoothIcon />
                    </ListItemIcon>
                    <ListItemText primary="Bluetooth" />
                    <ListItemSecondaryAction>
                        <Switch
                            onChange={handleToggleEvent}
                            edge="end"
                            checked={isChecked}
                        />
                    </ListItemSecondaryAction>
                </ListItem>
            </List>
            <h2>{isChecked === true ? "Bluetooth On" : "Bluetooth Off"}</h2>
        </div>
    );
}