4 bonnes raisons d'utiliser Chakra UI dans votre prochain projet

Qu’est-ce que Chakra UI ?

La page d’accueil de Chakra UI indique que c’est une bibliothèque de composants simple, modulaire et accessible, qui permet de créer des applications React rapidement. Après avoir livré quelques projets où nous avons utilisé Chakra, je confirme cette description. Concevoir des interfaces n’a jamais été aussi rapide et pratique.

Vous connaissez peut-être des bibliothèques comme Material UI, Ant Design ou React Bootstrap. Et vous vous demandez peut-être pourquoi vous auriez besoin d’une autre bibliothèque UI alors qu’il existe déjà de nombreuses options éprouvées. Eh bien, Chakra se distingue principalement par ses excellentes fonctionnalités intégrées, son accessibilité et son haut niveau de personnalisation.

Les avantages de Chakra UI

Facile à personnaliser

L’un des plus grands atouts de Chakra UI est que vous pouvez l’adapter très facilement à vos besoins de design. En général, on commence par un thème personnalisé pour définir les couleurs, les tailles de police, les breakpoints pour le responsive, les ombres, et bien plus encore ! Cela offre déjà beaucoup de flexibilité pour créer des interfaces avancées, mais ce n’est pas tout.

Chaque composant que vous utilisez accepte de nombreuses props que vous pouvez exploiter pour le styliser. 

Par exemple, examinons l’usage simple du composant `<Button>` dans Chakra UI :

 ```jsx <Button colorScheme="teal" variant="outline" size="lg" isLoading={loading} loadingText="Loading"> Click me </Button>

Avec ce bout de code, Chakra rendra un bouton avec les styles fournis par le thème. 

Mais voyons maintenant comment modifier son style avec quelques props : 

```jsx <Button colorScheme="red" variant="solid" size="md" isLoading={false}> Click me </Button>

Dans cet extrait, nous passons le color scheme du bouton à une palette rouge et changeons sa variant pour obtenir un fond plein. Nous redimensionnons aussi le bouton en medium et définissons isLoading à false.

Voyons cela. D’abord, nous changeons le color scheme du bouton pour utiliser une palette teal. Ensuite, nous modifions sa variant pour n’avoir qu’une bordure au lieu d’un fond complet. Puis nous rendons tout le bouton plus grand. Au-delà du style, on peut aussi changer le comportement du bouton. Quand la valeur de “isLoading” est true, nous masquons l’icône et affichons un loader qui accepte quelques props. L’icône comme le loader font aussi partie de Chakra UI !

Si vous avez déjà utilisé TailwindCSS, très populaire ces derniers temps, ou Styled System, vous verrez des similitudes. Tailwind est un ensemble de classes CSS pour composer des composants. De leur côté, Styled System et Chakra fournissent des composants prêts à l’emploi, dont vous pouvez ajuster des styles précis via des props. Toutes ces solutions ont leurs adeptes et leurs détracteurs. Ces derniers pointent un inconvénient majeur : le code peut perdre en lisibilité à cause du grand nombre de classes/props. Bien sûr, cela peut poser problème, c’est pourquoi il est essentiel de garder nos composants concis.

Prise en charge du dark mode

Le dark mode devient une composante essentielle de notre vie numérique. On peut l’utiliser sur nos smartphones, nos ordinateurs portables et, bien sûr, sur les sites web. Même si tous les projets n’exigent pas forcément un dark mode, c’est appréciable que Chakra simplifie son implémentation. Par défaut, la plupart des composants de Chakra sont compatibles dark mode. Il suffit d’un peu de configuration et le tour est joué ! Il est aussi possible d’utiliser le system color mode : si l’utilisateur règle le dark mode par défaut sur son appareil, votre site l’adoptera automatiquement.

Responsive facilité

Chakra UI gère le responsive nativement. Vous n’avez pas besoin d’ajouter des media queries manuellement, Chakra UI propose des valeurs sous forme d’objets et de tableaux pour définir des styles responsives. À noter qu’il utilise “@media(min-width)” pour garantir une approche mobile-first.

Vous pouvez définir vos propres breakpoints dans la configuration du thème, ou utiliser ceux par défaut. 

Regardons à quoi ressemble l’implémentation de la réactivité dans un composant `<Text>` basique : 

```jsx <Text fontSize={["24px", null, "56px"]} textAlign={["center", null, "left"]}> Responsive Text </Text>

Avec l’extrait ci-dessus, “<Text>” aura “24px” et sera centré sur tous les breakpoints. 

Au lieu d’une seule valeur, nous passons un tableau de valeurs. Chakra prendra “24px” depuis la prop “fontSize” et “center” depuis “textAlign”, et les appliquera pour les écrans entre 0 et 30em (valeurs par défaut dans la config du thème). Notez ensuite le “null” : nous ne voulons pas changer les styles dans la plage 30em à 48em (toujours les breakpoints par défaut), donc nous passons null pour éviter de générer du CSS inutile. Aux derniers indices des tableaux, nous définissons “56px” et “left”, de sorte que notre texte adopte ce style pour toute taille d’écran supérieure à 48em.

Personnellement, je ne suis pas un grand fan de cette notation par tableau. Elle rend plus difficile l’identification des styles appliqués à chaque breakpoint. 

Heureusement, on peut utiliser la syntaxe par objet : 

```jsx <Text fontSize={{ base: "24px", md: "56px" }} textAlign={{ base: "center", md: "left" }} > Responsive Text </Text>

La syntaxe change, mais le comportement reste identique.

Accessible

Nous ne le répéterons jamais assez : l’accessibilité est essentielle. Une part importante de la population vit avec un handicap, il est donc crucial de créer des interfaces accessibles. Nous devons généralement implémenter plusieurs recommandations WCAG, mais heureusement, des éléments comme les outlines appropriés et la navigation au clavier sont déjà pris en charge par Chakra. Bien sûr, ce n’est pas tout, et il faut aussi penser à la structure hiérarchique des titres ou aux attributs alt des images.

BONUS : Récemment, Chakra UI a ajouté la prise en charge des langues RTL. Désormais, il est bien plus simple de créer des composants couvrant à la fois les langues RTL et LTR.

Conclusion

Comme vous pouvez le voir, Chakra UI tient ses promesses de modularité et d’accessibilité. En plus de cela, elle est vraiment légère (375 kB minifiée, 101 kB minifiée et compressée en gzip, en gardant à l’esprit qu’en plus du core de Chakra il faut installer Emotion). D’après mon expérience, c’est l’une des meilleures bibliothèques de composants pour React !

Si vous souhaitez en savoir plus sur les bibliothèques de composants, ou déterminer laquelle convient le mieux à votre projet, nous serons ravis d’échanger avec vous. Écrivez-nous à hello@start-up.house