Construire des composants React réutilisables en utilisant Tailwind

À propos de l'auteur

Tilo Mitra a étudié le génie à l'Université de Waterloo. Il est directeur d'ingénierie et ingénieur logiciel. Il écrit en JavaScript…
En savoir plus sur
Tilo
…

Tailwind est un framework CSS très utile qui fournit des noms de classe de bas niveau aux développeurs Web. Il n'a pas de JavaScript et fonctionne bien avec les frameworks existants tels que React, Vue, Angular, Ember et autres. Bien que cela soit positif, il peut être déroutant pour les nouveaux développeurs de comprendre comment intégrer Tailwind dans leurs applications. Dans cet article, nous explorerons des façons de créer des composants React réutilisables à l'aide de Tailwind.

Dans cet article, nous verrons plusieurs façons différentes de créer des composants React réutilisables qui exploitent Tailwind sous le capot tout en exposant une interface agréable à d'autres composants. Cela améliorera votre code en passant de longues listes de noms de classe à des accessoires sémantiques plus faciles à lire et à maintenir.

Vous devrez avoir travaillé avec React afin d'avoir une bonne compréhension de ce message.

Tailwind est un framework CSS très populaire qui fournit des classes utilitaires de bas niveau pour aider les développeurs à créer des conceptions personnalisées. Il a gagné en popularité au cours des dernières années, car il résout très bien deux problèmes:

1. Tailwind facilite la modification itérative du code HTML sans parcourir les feuilles de style pour trouver des sélecteurs CSS correspondants.
2. Tailwind a des conventions et des valeurs par défaut saines. Cela permet aux gens de commencer facilement sans écrire CSS à partir de zéro.

Ajoutez la documentation complète et il n'est pas surprenant que Tailwind soit si populaire.

Ces méthodes vous aideront à transformer du code qui ressemble à ceci:

   Activer

Pour un code qui ressemble à ceci:

   Activer

La différence entre les deux extraits est que dans le premier, nous avons utilisé une balise de bouton HTML standard, tandis que le second a utilisé un composant . Le composant avait été conçu pour être réutilisable et est plus facile à lire car il a une meilleure sémantique. Au lieu d'une longue liste de noms de classe, il utilise des propriétés pour définir divers attributs tels que taille textColor et bgColor .

Commençons.

Méthode 1: Contrôle des classes avec le module Classnames

Un moyen simple d'adapter Tailwind dans une application React est d'embrasser les noms de classe et de les basculer par programme.

Le module classnames npm fait il est facile de basculer entre les classes dans React. Pour montrer comment vous pouvez l'utiliser, prenons un cas d'utilisation dans lequel vous avez

composants dans votre application React.

 // Cela peut être difficile à lire.

Activer // C'est React plus conventionnel. Activer

Voyons comment séparer les classes Tailwind pour que les utilisateurs de ce composant puissent utiliser des accessoires React tels que size textColor et bgColor .

1. Passez des accessoires tels que bgColor et textColor directement dans le modèle de chaîne de nom de classe.
2. Utilisez des objets pour changer de nom de classe par programmation (comme nous l'avons fait avec le taille prop)

Dans l'exemple de code ci-dessous, nous allons examiner les deux approches.

 // Button.jsx
importer des noms de classe à partir de 'classnames';

Bouton de fonction ({size, bgColor, textColor, children}) {
    revenir (
        

        {enfants}          ) }; bouton d'exportation par défaut;

Dans le code ci-dessus, nous définissons un composant Button qui prend les accessoires suivants:

• size
  Définit la taille du bouton et applique les classes Tailwind text-xs ou text-xl
• bgColor
  Définit la couleur d'arrière-plan du bouton et applique les classes Tailwind bg - * .
• textColor
  Définit la couleur du texte du bouton et applique les classes text- * Tailwind .
• enfants
  Tous les sous-composants seront passés ici. Il contiendra généralement le texte dans .

En définissant Button.jsx nous pouvons maintenant l'importer et utiliser des accessoires React au lieu des noms de classe. Cela rend notre code plus facile à lire et à réutiliser.

 import Button from './Button';
 Activer 

Utilisation des noms de classe pour les composants interactifs

Un bouton est un cas d'utilisation très simple. Et quelque chose de plus compliqué? Eh bien, vous pouvez aller plus loin pour créer des composants interactifs.

Par exemple, regardons une liste déroulante réalisée à l'aide de Tailwind.

Une liste déroulante interactive construite à l'aide de Tailwind et du changement de nom de classe.

Pour cet exemple, nous créons le composant HTML à l'aide des noms de classe CSS Tailwind mais nous exposons un composant React qui ressemble à ceci:

  {
    console.log ("Option sélectionnée", option)}
  }
/>

En regardant le code ci-dessus, vous remarquerez que nous n'avons pas de classes Tailwind. Ils sont tous cachés dans le code d'implémentation de . L'utilisateur de ce composant Dropdown n'a qu'à fournir une liste d'options et un gestionnaire de clics, onOptionSelect quand une option est cliquée.

Voyons comment ce composant peut être construit à l'aide de Tailwind.

Suppression d'une partie du code non lié, voici l'essentiel de la logique. Vous pouvez voir ce Codepen pour un exemple complet.

 import classNames from 'classnames';

fonction Dropdown ({options, onOptionSelect}) {

  // Gardez une trace si la liste déroulante est ouverte ou non.
  const [isActive, setActive] = useState (false);
  
  const buttonClasses = `inline-flex justification-centre w-full arrondi-md border border-grey-300 px-4 py-2 bg-white text-sm Leading-5 font-medium text-grey-700 hover: text-grey -500 focus: contour-aucun focus: bordure-bleu-300 focus: ombre-contour-bleu actif: bg-bleu-500 actif: texte-gris-200 transition facilité-in-out durée-150`;

  revenir (
    // Bascule la liste déroulante si le bouton est cliqué
     setActive (! IsActive)} className = {buttonClasses}>
      Les options
    
    // Utilisez le module classnames pour basculer les classes Tailwind .block et .hidden
    

    // Les éléments de liste sont rendus ici.
    {options.map ((option) => 
 onOptionSelect (option)}> {option} 
)}
   
  )
}

exporter la liste déroulante par défaut;

La liste déroulante est rendue interactive en la montrant ou en la masquant de manière sélective à l'aide des classes .hidden et .block . Chaque fois que le est enfoncé, nous tirons le gestionnaire onClick qui bascule l'état isActive . Si le bouton est actif ( isActive === true ), nous définissons la classe de bloc . Sinon, nous définissons la classe cachée . Il s'agit des deux classes Tailwind pour basculer le comportement d'affichage .

En résumé, le module classnames est un moyen simple et efficace de contrôler par programme les noms de classe pour Tailwind. Il facilite la séparation de la logique en accessoires React, ce qui facilite la réutilisation de vos composants. Il fonctionne pour des composants simples et interactifs.

Méthode 2: Utilisation de constantes pour définir un système de conception

Une autre façon d'utiliser Tailwind et React ensemble consiste à utiliser des constantes et à mapper des accessoires à une constante spécifique. Ceci est efficace pour les systèmes de conception de bâtiments. Voyons un exemple.

Commencez avec un fichier theme.js où vous répertoriez votre système de conception.

 // theme.js (vous pouvez l'appeler comme vous voulez)
export const ButtonType = {
    primaire: "bg-blue-500 hover: bg-blue-700 text-white font-bold arronded",
    secondaire: "bg-blue-500 hover: bg-blue-700 text-white font-bold arronded",
    basic: "bg-white hover: bg-grey-700 text-grey-700 font-bold arronded",
  supprimer: "bg-red-300 survoler: bg-red-500 texte-blanc police-gras arrondi"
};

export const Const ButtonSize = {
  sm: "py-2 px-4 text-xs",
  lg: "py-3 px-6 text-lg"
}

Dans ce cas, nous avons deux ensembles de constantes:

• ButtonType définit le style des boutons dans notre application.
• ButtonSizes définit les tailles des boutons dans notre application. [19659042] Maintenant, écrivons notre composant

:

 import {ButtonType, ButtonSize} de './theme';

Bouton de fonction ({taille, type, enfants}) {

  // Cela peut être amélioré. Je reste simple ici en joignant deux chaînes.
  const classNames = ButtonType [type] + "" + ButtonSize [size];

  revenir (
    

{enfants}   ) } bouton d'exportation par défaut;