Catégories
Astuces et Design

Créer un interrupteur à bascule dans React en tant que composant réutilisable

Dans cet article, nous allons créer un interrupteur à bascule inspiré d'iOS à l'aide de React. Ce sera un petit composant autonome que vous pourrez réutiliser dans de futurs projets. Au fur et à mesure, nous allons également créer une application React de démonstration simple qui utilise notre composant d'interrupteur à bascule personnalisé.

Nous pourrions utiliser des bibliothèques tierces pour cela, mais la construction à partir de zéro nous permet de mieux comprendre le fonctionnement de notre code et nous permet de personnaliser complètement notre composant.

Les formulaires constituent un moyen majeur pour permettre les interactions des utilisateurs. La case à cocher est traditionnellement utilisée pour collecter des données binaires – telles que Oui ou non, vrai ou faux, activer ou désactiver, sur ou de, etc. Bien que certaines conceptions d'interface modernes évitent les champs de formulaire lors de la création d'interrupteurs à bascule, je m'en tiendrai ici en raison de leur plus grande accessibilité.

Voici une capture d'écran du composant que nous allons créer:

Deux petits et deux grands commutateurs à bascule à la fois dans un état coché et non coché

Commencer

Utilisons l'application Create React pour lancer rapidement une application React. Si vous ne connaissez pas l'application Create React, consultez notre guide de démarrage.

create-react-app toggleswitch

Une fois que tout est installé, accédez au répertoire nouvellement créé et démarrez le serveur avec yarn start (ou npm start si tu préfères). Cela démarrera le serveur de développement à http: // localhost: 3000.

Ensuite, créez un ToggleSwitch répertoire dans le src annuaire. C'est là que nous allons fabriquer notre composant:

mkdir src/ToggleSwitch

Dans ce répertoire, créez deux fichiers: ToggleSwitch.js et ToggleSwitch.scss:

touch ToggleSwitch.js ToggleSwitch.scss

Enfin, modifiez App.js comme suit:

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

Le balisage

Nous pouvons commencer avec un élément de formulaire d'entrée de case à cocher HTML de base avec ses propriétés nécessaires définies:

<input type="checkbox" name="name" id="id" />

Pour construire autour d'elle, nous aurons peut-être besoin d'un

avec un class, une et le se contrôler. En ajoutant tout, nous pourrions obtenir quelque chose comme ceci:

<div class="toggle-switch">
  <input type="checkbox" class="toggle-switch-checkbox" name="toggleSwitch" id="toggleSwitch" />
  <label class="toggle-switch-label" for="toggleSwitch">
    Toggle Me!
  label>
div>

Avec le temps, nous pouvons nous débarrasser du texte de l'étiquette et utiliser le pour cocher ou décocher le contrôle d'entrée de la case à cocher. À l'intérieur de , ajoutons-en deux balises qui nous aident à construire le support de commutateur et le commutateur à bascule lui-même:

<div class="toggle-switch">
  <input type="checkbox" class="toggle-switch-checkbox" name="toggleSwitch" id="toggleSwitch" />
  <label class="toggle-switch-label" for="toggleSwitch">
    <span class="toggle-switch-inner">span>
    <span class="toggle-switch-switch">span>
  label>
div>

Conversion en composant React

Maintenant que nous savons ce qui doit entrer dans le HTML, tout ce que nous devons faire est de convertir le HTML en un composant React. Commençons par un composant de base ici. Nous en ferons un composant de classe, puis nous le convertirons en hooks, car il est plus facile pour les nouveaux développeurs de suivre state que useState.

Ajoutez ce qui suit à src/ToggleSwitch/ToggleSwitch.js:

import React, { Component } from "react";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name="toggleSwitch"
          id="toggleSwitch"
        />
        <label className="toggle-switch-label" htmlFor="toggleSwitch">
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

À ce stade, il n'est pas possible d'avoir plusieurs curseurs d'interrupteur à bascule sur la même vue ou la même page en raison de la répétition de ids. Nous pourrions tirer parti de la méthode de création de composants de React ici, mais dans ce cas, nous utiliserons props pour renseigner dynamiquement les valeurs:

import React, { Component } from 'react';

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name={this.props.Name}
          id={this.props.Name}
        />
        <label className="toggle-switch-label" htmlFor={this.props.Name}>
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

le this.props.Name remplira les valeurs de id, name et for (notez que c'est htmlFor dans React JS) de manière dynamique, afin que vous puissiez transmettre différentes valeurs au composant et avoir plusieurs instances sur la même page. Notez également que le la balise n'a pas de fin marque. Au lieu de cela, il est fermé dans la balise de départ comme , et en termes de JSX, c'est tout à fait correct.

Testez ceci en modifiant le contenu de App.js comme suit:

function App() {
  return (
    <>
      <ToggleSwitch Name='newsletter' />
      <ToggleSwitch Name='daily' />
      <ToggleSwitch Name='weekly' />
      <ToggleSwitch Name='monthly' />
    >
  );
}

Inspectez la sortie résultante sur http: // localhost: 3000 / (éventuellement en utilisant les outils de développement de votre navigateur) et assurez-vous que tout fonctionne correctement.

Stylisme et SCSS

J'ai récemment écrit sur le style des composants React, où j'ai comparé les différentes façons dont cela était possible. Dans cet article, j’ai conclu que SCSS était la meilleure méthode, et c’est ce que nous utiliserons ici.

Pour que SCSS fonctionne avec l'application Create React, vous devez installer le package node-sass:

yarn add node-sass

Nous devrons également importer le fichier correct dans notre composant:



import React, { Component } from 'react';
import './ToggleSwitch.scss';
...

Maintenant pour le style. Voici un aperçu de ce que nous recherchons:

  • Par défaut, le commutateur sera uniquement 75px large et aligné verticalement inline-block afin qu'il soit aligné avec le texte et ne pose pas de problèmes de mise en page.
  • Nous nous assurerons que le contrôle ne peut pas être sélectionné afin que les utilisateurs ne puissent pas le glisser-déposer.
  • Nous masquerons la case à cocher d'origine.
  • Les deux ::after et ::before les pseudo-éléments doivent être stylisés et transformés en éléments pour les intégrer dans le DOM et les styliser.
  • Nous ajouterons également des transitions CSS pour un effet animé sympa.

Et voici à quoi cela ressemble dans SCSS. Ajoutez ce qui suit à src/ToggleSwitch/ToggleSwitch.scss:

.toggle-switch {
  position: relative;
  width: 75px;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-align: left;
  &-checkbox {
    display: none;
  }
  &-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 0 solid #bbb;
    border-radius: 20px;
    margin: 0;
  }
  &-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
    &:before,
    &:after {
      display: block;
      float: left;
      width: 50%;
      height: 34px;
      padding: 0;
      line-height: 34px;
      font-size: 14px;
      color: white;
      font-weight: bold;
      box-sizing: border-box;
    }
    &:before {
      content: "Yes";
      text-transform: uppercase;
      padding-left: 10px;
      background-color: #f90;
      color: #fff;
    }
  }
  &-disabled {
    background-color: #ddd;
    cursor: not-allowed;
    &:before {
      background-color: #ddd;
      cursor: not-allowed;
    }
  }
  &-inner:after {
    content: "No";
    text-transform: uppercase;
    padding-right: 10px;
    background-color: #bbb;
    color: #fff;
    text-align: right;
  }
  &-switch {
    display: block;
    width: 24px;
    margin: 5px;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40px;
    border: 0 solid #bbb;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
  }
  &-checkbox:checked + &-label {
    .toggle-switch-inner {
      margin-left: 0;
    }
    .toggle-switch-switch {
      right: 0px;
    }
  }
}

En supposant que vous suivez, si vous vous dirigez vers le serveur de développement à l'adresse http: // localhost: 3000 /, vous verrez maintenant quatre commutateurs à bascule joliment stylisés. Essayez de les basculer; ils devraient tous fonctionner.

Prenez également un certain temps pour parcourir le code ci-dessus. Si vous n'êtes pas sûr de quelque chose, vous pouvez consulter la documentation de Sass ou vous rendre sur les forums SitePoint et poser une question.

Étiquettes dynamiques

Actuellement, les options de bascule sont codées en dur:

.toggle-switch {
  ...
  &-inner {
    ...
    &:before {
      content: "Yes";
      ...
    }
  }
  ...
  &-inner:after {
    content: "No";
    ...
  }
  ...
}

Pour rendre le composant plus flexible, nous pouvons les récupérer dynamiquement à partir du contrôle en utilisant des attributs de données HTML5:

&:before {
  content: attr(data-yes);
  ...
}
&-inner:after {
  content: attr(data-no);
  ...
}

Nous coderons en dur les attributs de données pour les tests, mais nous rendrons cela plus flexible dans la version finale:



class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        ...
        <label className="toggle-switch-label" htmlFor={this.props.Name}>
          <span className="toggle-switch-inner" data-yes="Ja" data-no="Nein"/>
          <span className="toggle-switch-switch" />
        label>
      div>
    );
  }
}

Une version de composant plus petite

De plus, pour les écrans plus petits, ce serait une excellente idée d'utiliser une version plus petite du commutateur, sans le texte. Alors ajoutons le style pour lui avec des tailles minimales et en supprimant le texte:

.toggle-switch {
  ...
  &.small-switch {
    width: 40px;
    .toggle-switch-inner {
      &:after,
      &:before {
        content: "";
        height: 20px;
        line-height: 20px;
      }
    }
    .toggle-switch-switch {
      width: 16px;
      right: 20px;
      margin: 2px;
    }
  }
}

En ce qui concerne la réactivité, nous devrions changer la taille complète, alors utilisons la fonction d'échelle CSS. Ici, nous avons couvert toutes les largeurs réactives basées sur Bootstrap:

.toggle-switch {
  ...
  @media screen and (max-width: 991px) {
    transform: scale(0.9);
  }
  @media screen and (max-width: 767px) {
    transform: scale(0.825);
  }
  @media screen and (max-width: 575px) {
    transform: scale(0.75);
  }
}

Vous pouvez tester cela en ajoutant le small-switch classe au parent

élément dans ToggleSwitch.js:

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch small-switch">
        ...
      div>
    );
  }
}

Revenez au serveur de développement et testez vos modifications. Si vous souhaitez vérifier ce que vous avez par rapport au fichier SCSS terminé, vous pouvez le trouver ici.

Theming dans SCSS

Étant donné que nous pouvons utiliser des variables dans SCSS, l'ajout de la prise en charge de plusieurs thèmes de couleur dans notre application est simplifié. Vous pouvez en savoir plus à ce sujet dans «Sass Theming: The Never Ending Story». Nous utiliserons ici des thèmes de couleurs et changerons toutes les couleurs brutes en variables. Les trois premières lignes sont un ensemble de couleurs configurables, ce qui nous aide à thématiser notre petit contrôle:


$label-colour: #bbb;
$disabled-colour: #ddd;
$toggle-colour: #2F855A;
$white: #fff;


.toggle-switch {
  ...
  &-label {
    ...
    border: 0 solid $label-colour;
  }
  &-inner {
    ...
    &:before {
      ...
      background-color: $toggle-colour;
      color: $white;
    }
  }
  &-disabled {
    background-color: $disabled-colour;
    cursor: not-allowed;
    &:before {
      background-color: $disabled-colour;
      cursor: not-allowed;
    }
  }
  &-inner:after {
    ...
    background-color: $label-colour;
    color: $white;
  }
  &-switch {
    ...
    background: $white;
    border: 0 solid $label-colour;
  }
  ...
}

Et c’est tout avec le style. Ajoutons maintenant de l’interactivité.

Interactions et JavaScript

Veuillez noter que la section suivante contient uniquement du code de démonstration pour expliquer les concepts. Vous ne devriez pas mettre à jour votre ToggleSwitch composant dans cette section.

Notre composant de base sera un composant muet (également connu sous le nom de composant de présentation) dont l'état sera contrôlé par un composant parent ou un conteneur tel qu'un form. Qu'entend-on par contrôlé? Voyons d'abord une version non contrôlée:

import React from 'react';

const ToggleSwitch = () => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
    />
  div>
);

export default ToggleSwitch;

Lorsque les utilisateurs interagissent avec l'entrée de case à cocher ci-dessus, il basculera entre un état coché et non coché de son propre chef, sans que nous ayons à écrire du JavaScript. Les éléments d'entrée HTML sont capables de gérer leur propre état interne et ils le font en mettant à jour directement le DOM.

Dans React, cependant, il est recommandé d'utiliser des composants contrôlés, comme le montre l'exemple suivant:

import React from 'react';

const ToggleSwitch = ({checked}) => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
      checked={checked}
    />
  div>
);

export default ToggleSwitch;

Ici, React contrôle l'état de l'entrée de la case à cocher. Toutes les interactions avec cette entrée doivent passer par le DOM virtuel. Si vous essayez d'interagir avec le composant tel quel, rien ne se passera, car nous n'avons défini aucun code JavaScript susceptible de modifier la valeur du checked accessoire que nous passons.

Pour résoudre ce problème, nous pouvons passer un onChange prop – une fonction à appeler chaque fois que la case est cochée:

import React from 'react';

const ToggleSwitch = ({checked, onChange}) => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
      checked={checked}
      onChange={e => onChange(e.target.checked)}
    />
  div>
);

export default ToggleSwitch;

L'entrée de la case à cocher est désormais interactive. Les utilisateurs peuvent basculer le composant «on» et «off» comme avant. La seule différence ici est que l'état est contrôlé par React par opposition à la version non contrôlée précédente. En procédant de cette manière, nous pouvons facilement accéder à l'état de notre composant à tout moment via JavaScript. Nous pouvons également définir facilement la valeur initiale lors de la déclaration du composant.

Voyons maintenant comment utiliser le ToggleSwitch composant. Voici un exemple simplifié basé sur les classes:

import React, { Component } from 'react';

class Form extends Component {
  state = { checked : false }

  onChange = newValue => {
    this.setState({ checked: newValue });
  }

  render() {
    return (
      <ToggleSwitch id="toggleSwitch" checked={this.checked} onChange={this.onChange} />
    );
  }
}

export default Form;

Convertissons maintenant le composant basé sur la classe en un composant fonctionnel à l'aide de crochets:

import React, { useState } from 'react';

export default function Form() {
  let (checked, setChecked) = useState(false);

  return (
    <ToggleSwitch id="toggleSwitch" checked={checked} onChange={setChecked} />
  )
}

Comme vous pouvez le voir, nous avons considérablement réduit le nombre de lignes en utilisant un composant fonctionnel avec la méthode de création de crochets.

Si les hooks dans React sont nouveaux pour vous, consultez notre guide, «React Hooks: Comment démarrer et créer les vôtres».

Finalisation du composant ToggleSwitch

Revenons maintenant à notre ToggleSwitch composant. Nous aurons besoin des accessoires suivants:

  • id (obligatoire): c'est le id qui va être transmis au contrôle d’entrée de la case à cocher. Sans cela, le composant ne sera pas rendu.
  • checked (obligatoire): cela contiendra l'état actuel, qui sera une valeur booléenne.
  • onChange (obligatoire): cette fonction sera appelée lorsque l'entrée onChange le gestionnaire d'événements est déclenché.
  • name (facultatif): ce sera le texte de l'étiquette de l'entrée de la case à cocher, mais nous ne l'utilisons généralement pas.
  • small (facultatif): il s'agit d'une valeur booléenne, qui rend l'interrupteur à bascule dans un petit mode, où le texte n'est pas rendu.
  • optionLabels (facultatif): si vous n'utilisez pas le small version du contrôle, vous devrez peut-être le transmettre au commutateur à bascule sous la forme d'un tableau de deux valeurs, qui signifient le texte pour True et False. Un exemple serait Text={("Yes", "No")}.
  • disabled (facultatif): il sera directement transmis au .

Lorsque vous n'utilisez pas le small version, la suivante optionLabels le texte sera utilisé par défaut:


ToggleSwitch.defaultProps = {
  optionLabels: ("Yes", "No"),
};

Étant donné que la plupart des accessoires doivent être définis par l'utilisateur et que nous ne pouvons pas utiliser de valeurs arbitraires, il est toujours préférable d'arrêter le rendu si les accessoires requis ne sont pas transmis. Cela peut être fait à l'aide d'un simple JavaScript if instruction ou un opérateur ternaire utilisant ? : ou un court-circuit &&:

{this.props.id ? (
  <!-- display the control -->
) : null}

Au fur et à mesure que notre application se développe, nous pouvons détecter de nombreux bogues avec la vérification de type. React a des capacités de vérification de type intégrées. Pour exécuter la vérification de type sur les accessoires d'un composant, vous pouvez affecter le propTypes propriété. Nous pouvons appliquer la liste d'accessoires ci-dessus à l'aide de la bibliothèque PropType de React, qui est une bibliothèque distincte qui exporte une gamme de validateurs pouvant être utilisés pour s'assurer que les données que vous recevez sont valides.

Vous pouvez l'installer comme ceci:

yarn add prop-types

Ensuite, importez la bibliothèque PropTypes en utilisant:


import PropTypes from "prop-types";

Nous définirons les PropTypes de la manière suivante:

ToggleSwitch.propTypes = {
  id: PropTypes.string.isRequired,
  checked: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string,
  optionLabels: PropTypes.array,
  small: PropTypes.bool,
  disabled: PropTypes.bool
};

A titre d'explication:

  • PropTypes.string.isRequired: il s'agit d'une valeur de chaîne et elle est obligatoire et obligatoire.
  • PropTypes.string: il s'agit d'une valeur de chaîne mais ce n'est pas obligatoire.
  • PropTypes.func: ceci est un accessoire qui prend une fonction comme valeur, mais ce n'est pas obligatoire.
  • PropTypes.bool: c'est une valeur booléenne, mais ce n'est pas obligatoire.
  • PropTypes.array: ceci est une valeur de tableau, mais ce n’est pas obligatoire.

Maintenant, nous pouvons continuer avec ToggleSwitch composant. Remplacez le contenu de src/ToggleSwitch/ToggleSwitch.js avec ce qui suit:

import React from "react";
import PropTypes from "prop-types";
import './ToggleSwitch.scss';



const ToggleSwitch = ({ id, name, checked, onChange, optionLabels, small, disabled }) => {

  return (
    <div className={"toggle-switch" + (small ? " small-switch" : "")}>
      <input
        type="checkbox"
        name={name}
        className="toggle-switch-checkbox"
        id={id}
        checked={checked}
        onChange={e => onChange(e.target.checked)}
        disabled={disabled}
        />
        {id ? (
          <label className="toggle-switch-label" htmlFor={id}>
            <span
              className={
                disabled
                  ? "toggle-switch-inner toggle-switch-disabled"
                  : "toggle-switch-inner"
              }
              data-yes={optionLabels(0)}
              data-no={optionLabels(1)}
            />
            <span
              className={
              disabled
                ? "toggle-switch-switch toggle-switch-disabled"
                : "toggle-switch-switch"
              }
            />
          label>
        ) : null}
      div>
    );
}


ToggleSwitch.defaultProps = {
  optionLabels: ("Yes", "No"),
};

ToggleSwitch.propTypes = {
  id: PropTypes.string.isRequired,
  checked: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string,
  optionLabels: PropTypes.array,
  small: PropTypes.bool,
  disabled: PropTypes.bool
};

export default ToggleSwitch;

Enfin, pour tester le composant, changez App.js ainsi:

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

function App() {
  let (newsletter, setNewsletter) = useState(false);

  const onNewsletterChange = (checked) => {
    setNewsletter(checked);
  }

  return (
    <>
      <ToggleSwitch id="newsletter" checked={ newsletter } onChange={ onNewsletterChange } />
      <label htmlFor="newsletter">Subscribe to our Newsletterlabel>
    >
  );
}

export default App;

Maintenant, lorsque vous vous dirigez vers http: // localhost: 3000 /, vous devriez voir la bascule de travail.

Rendre le clavier du composant accessible

La dernière étape consiste à rendre notre clavier composant accessible. Pour ce faire, modifiez d'abord l'étiquette comme ceci:



<label className="toggle-switch-label"
       htmlFor={id}
       tabIndex={ disabled ? -1 : 1 }
       onKeyDown={ e => handleKeyPress(e) }>
  ...
label>

Comme vous pouvez le voir, nous avons ajouté un tabIndex propriété, que nous définissons sur 1 (focalisable) ou -1 (non focalisable) selon que le composant est actuellement désactivé.

Nous avons également déclaré un handleKeyPress fonction pour traiter la réception d'une entrée clavier:

function handleKeyPress(e){
  if (e.keyCode !== 32) return;

  e.preventDefault();
  onChange(!checked)
}

Cela vérifie si la touche enfoncée est la barre d'espace. Si tel est le cas, il empêche l'action par défaut du navigateur (faites défiler la page dans ce cas) et fait basculer l'état du composant.

Et c’est essentiellement tout ce dont vous avez besoin. Le composant est désormais accessible au clavier.

Cependant, il y a un léger problème. Si vous cliquez sur le ToggleSwitch composant, vous obtenez maintenant un contour autour du composant entier, et ce n'est probablement pas souhaité. Pour lutter contre cela, nous pouvons modifier légèrement les éléments pour nous assurer qu'il reçoit un contour lorsqu'il est mis au point avec le clavier, mais pas lorsqu'il est cliqué:


<span
  className={
    disabled
      ? "toggle-switch-inner toggle-switch-disabled"
      : "toggle-switch-inner"
  }
  data-yes={optionLabels(0)}
  data-no={optionLabels(1)}
  tabIndex={-1}
/>
<span
  className={
  disabled
    ? "toggle-switch-switch toggle-switch-disabled"
    : "toggle-switch-switch"
  }
  tabIndex={-1}
/>

Ici, nous avons ajouté un tabIndex propriété à la fois de l'intérieur éléments pour s’assurer qu’ils ne peuvent pas recevoir de concentration.

Puis dans ToggleSwitch.scss:

$focus-color: #ff0;

.toggle-switch {
  ...
  &-label {
    ...
    &:focus {
      outline: none;
      > span {
        box-shadow: 0 0 2px 5px $focus-color;
      }
    }
    > span:focus {
      outline: none;
    }
  }
  ...
}

Cela appliquera un style au ToggleSwitchIntérieur élément lorsqu'il est focalisé avec le clavier, mais pas lorsque l'utilisateur clique dessus. Vous pouvez en savoir plus sur cette technique ici. Il est légèrement piraté et devrait être abandonné au profit de l’utilisation de: focus-visible, dès que le navigateur sera suffisamment pris en charge.

Un exemple plus complet

Pour terminer, j'aimerais vous présenter un exemple plus complet d'utilisation de ToggleSwitch composant dans le CodeSandbox suivant.

Cette démo utilise plusieurs ToggleSwitch composants sur la même page. L'état des trois dernières bascules dépend de l'état du premier. Autrement dit, vous devez accepter les e-mails marketing avant de pouvoir affiner votre choix parmi ceux à recevoir.

Résumé

Dans cet article, j'ai montré comment créer un interrupteur à bascule réutilisable inspiré d'iOS à l'aide de React. Nous avons examiné le style du composant avec SCSS, en faisant un composant contrôlé, comment le personnaliser en lui passant des accessoires et comment le rendre accessible au clavier.

Vous pouvez trouver le code complet de l'interrupteur à bascule sur notre dépôt GitHub.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *