How to create Bluetooth toggle button in ReactJS? Last Updated : 22 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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:NodeJS or NPMReact JSMaterial UIApproach: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 foldernameStep 2: After creating your project folder i.e. foldername, move to it using the following command.cd foldernameStep 3: After creating the ReactJS application, Install the material-ui module using the following command.npm install @material-ui/corenpm install @material-ui/iconsProject Structure:Project StructureThe 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> ); } Step to Run Application: Run the application using the following command from the root directory of the project.npm startOutput: Now open your browser and go to http://localhost:3000 Comment More infoAdvertise with us Next Article How to create Bluetooth toggle button in ReactJS? gouravhammad Follow Improve Article Tags : JavaScript Web Technologies ReactJS Material-UI React-Questions +1 More Similar Reads How to create Wifi Toggle Button in ReactJS? The Wi-Fi toggle button means a Wi-Fi Button to turn On and Off Wifi. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to build a Wi-Fi toggle button.Prerequisites:NodeJS or NPMReactJSMaterial UISteps to Create 2 min read How to Create Button in React-Native App ? React Native provides pre-defined components like button and TouchableOpacity to create buttons in a react native app. In this article, we will see how to create buttons in react-native, their syntax, and different types of buttons available in react-native.Table of ContentApproachButton in React Na 4 min read How to create Like Button Using React JS ? This is a social media world and the like button is one of the main components of it. From social media accounts to shopping platforms like buttons are everywhere. In this tutorial, we'll explore how to create a dynamic button in a React application. The button will change its appearance based on di 4 min read How to create a basic button in React Native ? In this article, we will learn how to create a basic button in React Native. To build a React Native app, we will use the Expo CLI, which provides a smoother experience for running your applications.ExpoIt is a framework and a platform for universal React applications. It is a set of tools and servi 5 min read How to create Switch in ReactJS? In this article, we will learn how to create a switch in React that toggles between light and dark mode. We'll use Material-UI's Switch component to achieve this functionality. By the end of this guide, you'll be able to implement a theme switcher that allows users to seamlessly switch between light 2 min read How to create Instagram Like button in ReactJS? We can create Instagram Like Button in ReactJS using the checkbox component, FormControlLabel component, and Icon component. Material UI for React has this component available for us and it is very easy to integrate. It can be used to turn an option on or off. We can create Instagram like button in 2 min read How to Create a Button in Material UI ? Material UI provides a simple and effective way to create buttons in React applications. These offer a sleek and responsive user interface element for various interactions. Installation// Package containing Material UI components including buttons.npm install @mui/materialApproachImport the Button c 1 min read How to use ButtonGroup Component in ReactJS? The ButtonGroup component can be used to group related buttons. Material UI for React has this component available for us and it is very easy to integrate. We can use ButtonGroup Component in ReactJS using the following approach:Creating React Application And Installing Module:Step 1: Create a React 2 min read How To Enable Button Based On If statement in ReactJS? React.js is one of the most popular JavaScript libraries for building user interfaces, and one common task is enabling or disabling a button based on certain conditions or user inputs. This is often achieved by using conditional logic such as if statements.In this article, we'll explore how to enabl 2 min read How to Disable a Button in React JS ? Disabling a button in React JS means making it unclickable and visually indicating its unavailability. This is done by setting the button's disabled attribute to true. It's used for controlled interactions, like form submissions with valid data.A disabled button becomes unclickable and visually sign 4 min read Like