How to create a Switch in ReactJS?

ReactJS is a popular JavaScript library for building user interfaces that provides an efficient way to develop interactive components. Toggle switches are often used to allow users to switch between dark mode and light mode themes in web applications. Toggles can also be used to show or hide specific content or parts of a page. In this article, we will explore how to create a toggle using ReactJS.

prerequisites

Before continuing with this tutorial, it is assumed that you have a basic understanding of ReactJS and have set up a development environment with Node.js and npm installed.

Set up the React application and install the required libraries

First, let’s create a new React application using Create React App. Open a command prompt and run the following command:

npx create-react-app toggle-slider-switch

This command will create a new directory called "toggle-slider-switch" and set up a basic React application in it. To navigate to the project directory, write the following command.

cd toggle-slider-switch

Step 2: Create the ToggleSlider component

In the project's src directory, create a new file named ToggleSlider.js. This file will contain our toggle slider component code. Open the ToggleSlider.js file in your favorite text editor and add the following code:

Example

In the code below, we have imported the useState hook from React, which allows us to handle state in functional components. We define a ToggleSlider component that maintains the state of the switch using a checked variable. The handleToggle function is responsible for updating the state when the switch is clicked.

import React, { useState } from 'react';
import './ToggleSlider.css';

const ToggleSlider = () => {
  const [checked, setChecked] = useState(false);

  const handleToggle = () => {
    setChecked(!checked);
  };

  return (
    <div className="toggle-slider">
      <input
        type="checkbox"
        id="toggle"
        checked={checked}
        onChange={handleToggle}
      />
      <label htmlFor="toggle" className="slider" />
    </div>
  );
};

export default ToggleSlider;

Step 3: Set the style of the toggle slider

Create a new file named ToggleSlider.css in the same directory (src). Add the following CSS code to style the toggle slider:

Example

In the code below, the CSS code styles the toggle slider, including the switch and its slider handle. input[type='checkbox'] is hidden and we use the label to trigger the toggle effect.

.toggle-slider {
  position: relative;
  width: 60px;
  height: 34px;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  cursor: pointer;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

input[type='checkbox'] {
  display: none;
}

input[type='checkbox']:checked + .slider {
  background-color: #2196f3;
}

input[type='checkbox']:checked + .slider:before {
  transform: translateX(26px);
}

Step 4: Implement the ToggleSlider component

Next, let’s modify the App.js file in the src directory to include our ToggleSlider component. Open the App.js file and update its contents with the following code

Example

In the code below, we import the ToggleSlider component and render it in the App component. This will display our toggle slider on the screen.

import React from 'react';
import ToggleSlider from './ToggleSlider';

const App = () => {
  return (
    <div className="app">
      <h1>Toggle Slider Example
      <ToggleSlider />
    </div>
  );
};

export default App;

Step 5: Run the React application

Now we can run our toggle switch application. In the command prompt, make sure you are in the root directory of your project (toggle the slider switch). Run the following command to start the React development server:

Once the compilation process is complete, your default browser will open and you should see the title "Toggle Slider Example" on the screen along with the toggle slider.

npm start

Step 6: Test the Toggle Slider

Clicking the toggle slider will toggle its state and change its appearance. The initial state in the ToggleSlider component is set to "false", so when you click the slider, it turns blue, indicating the "true" state. Click again to return to the initial state.

Output

in conclusion

In this article, we discussed how to create switches in Reactjs. We've covered the step-by-step process of setting up a React application, creating a toggle slider component, styling the slider, implementing the component, and running the application. By following this guide, you should now have a feature toggle slider switch in your ReactJS application, ready for further customization and integration into your project.

The above is the detailed content of How to create a Switch in ReactJS?. For more information, please follow other related articles on the PHP Chinese website!