So erstellen Sie eine wiederverwendbare Switch-Komponente in React

Eine Umschalt-/Umschaltkomponente ist ein Benutzeroberflächenelement, das es Benutzern ermöglicht, zwischen zwei Zuständen umzuschalten, typischerweise „Ein“ und „Ein“. und „aus“. Es wird häufig für Einstellungen, Präferenzen und Steuerungsfunktionen verwendet.

In diesem Tutorial erfahren Sie, wie Sie in React eine wiederverwendbare Switch-Komponente erstellen. Wir erstellen alles von Grund auf, ohne auf Bibliotheken von Drittanbietern zurückzugreifen.
 

1. Erstellen Sie zunächst ein neues React-Projekt mit npx und create-react-app. Sie können einen beliebigen Namen wählen:

npx create-react-app custom-switches

Von nun an arbeiten wir nur noch mit Dateien im Ordner src.

2. Erstellen und gestalten Sie die MySwitch-Komponente

Dieser Schritt steht im Mittelpunkt dieses Tutorials. Fügen Sie in Ihrem src-Verzeichnis einen neuen Ordner mit dem Namen components hinzu. Erstellen Sie in diesem Ordner zwei neue Dateien mit den Namen MySwitch.js und MySwitch.css.

Der Code für MySwitch.js:

// src/components/MySwitch.js

// CSS is very important for our switch component
import './MySwitch.css';

export const MySwitch = ({ value, onChange, rounded }) => {
  return (
    <>
      <label className='my-switch'>
        <input type='checkbox' checked={value} onChange={onChange} />
        <span className={`slider ${rounded ? 'rounded' : ''}`}></span>
      </label>
    </>
  );
};

Und hier ist der CSS-Code in MySwitch.css:

/* src/components/MySwitch.css */
.my-switch {
  position: relative;
  display: inline-flex;
  width: 60px;
  height: 32px;
}

.my-switch input {
  width: 0;
  height: 0;
}

/* The slider/track of the switch */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: #ccc;
  transition: 0.4s;
}

/* The thumb of the switch */
.slider:before {
  position: absolute;
  content: '';
  height: 25px;
  width: 25px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}

/* Style the slider when the switch is ON (the checkbox is checked) */
.my-switch input:checked + .slider {
  background-color: #4caf50;
}

.my-switch input:checked + .slider:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
}

/* Rounded switch */
.slider.rounded {
  border-radius: 32px;
}

.slider.rounded:before {
  border-radius: 50%;
}

3. Jetzt ist es an der Zeit, unsere benutzerdefinierte Switch-Komponente zu nutzen.

Entfernen Sie in Ihrer Datei src/App.js den gesamten Standardcode und fügen Sie Folgendes hinzu:

// src/App.js
import { useState } from 'react';
import './App.css';

import { MySwitch } from './components/MySwitch';

function App() {
  // state for the first swtich
  const [valueOne, setValueOne] = useState(true);

  // state for the second swtich
  const [valueTwo, setValueTwo] = useState(false);

  // this function is called when the first switch is toggled
  const handleChangeOne = () => {
    setValueOne(!valueOne);
  };

  // this function is called when the second switch is toggled
  const handleChangeTwo = () => {
    setValueTwo(!valueTwo);
  };

  return (
    <div className='container'>
      <h2>KindaCode.com - Custom Switches</h2>
      <div className='card'>
        <span>Show the box?</span>
        <MySwitch value={valueOne} onChange={handleChangeOne} rounded={true} />
      </div>

      <div className='card'>
        <span>Reveal the secret?</span>
        <MySwitch value={valueTwo} onChange={handleChangeTwo} rounded={false} />
      </div>

      {valueOne && <div className='box'></div>}
      {valueTwo && <div className='secret'>1 + 1 = 2</div>}
    </div>
  );
}

export default App;

Ersetzen Sie abschließend den automatisch generierten Code in Ihrer src/App.css durch Folgendes:

/* src/App.css */
.container {
  width: 80%;
  margin: 40px auto;
}

.card {
  margin: 30px 0;
  padding: 10px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.box {
  margin: 30px 0;
  width: 300px;
  height: 100px;
  background: orange;
}

.secret {
  font-size: 40px;
  font-weight: bold;
  font-style: italic;
  color: blue;
}

4. Starten Sie die App:

npm start

Mit dieser Schritt-für-Schritt-Anleitung können Sie jetzt eine wiederverwendbare Übergangskomponente in React erstellen.