Tags : #CSS #FrontEnd #JS #React #UI
⚡ Chakra UI est un projet Open Source qui permet de simplifier l’écriture d’interfaces utilisateurs avec React JS.
Dans ce domaine il existe déjà beaucoup de librairies Open Source comme Material UI ou Reactstrap
Alors pourquoi ⚡ ️Chakra UI ?
API de composition
Chakra UI propose une approche utilitaire dans l’esprit de Tailwind CSS mais dans l’écosystème React.
La librairie ajoute à l’approche utilitaire la notion de composition.
La composition est un des patterns les plus importants dans le développement UI moderne. Elle permet d’éviter de créer des composants qui se transforment rapidement en monstruosités et de combiner souplesse et réutilisabilité.
Accessibilité
Par défaut, tous les composants de Chakra UI sont disponibles. Et surtout la librairie permet d’implémenter ses propres composants en les rendant accessibles.
Gestion du focus, navigation au clavier, gestion des attributs ARIA et autres bonnes pratiques UX/UI font partie intégrante de la librairie.
Gestion du thème
Chakra arrive avec un thème de base déjà bien configuré. Mais la puissance de la solution vient du fait que changer le thème est un jeu d’enfant !
Cela permet de pouvoir gérer le fameux Dark Mode mais pas seulement.
Par exemple, sur le site de Codeurs en Seine, tout le site change de thème entre la partie conférence annuelle et la partie meetups. On peut voir que l’ensemble des composants (navigation, boutons, etc…) change sans pour autant avoir à les réécrire ou devoir charger une autre feuille CSS.
Si vous souhaitez générer rapidement des couleurs compatibles avec Chakra UI, je ne peux que vous conseiller Smart Swatch 😉 (c’est d’ailleurs ce que conseille également la documentation de Chakra 😛).
Communauté
En dehors de l’aspect technique, le créateur Segun Adebayo et tous les contributeurs sont très accessibles et bienveillants. Participer au projet est donc super simple et avec mes petites modifications apportées, je fais aussi partie des contributeurs 😇
Conclusion
Comme vous l’aurez peut être compris, je ne peux que vous recommander d’aller faire un tour sur la documentation de la version 1.0 qui vient de sortir au moment où j’écris ces mots.
Documentation de la version 1.0 https://chakra-ui.com/
Publié le 24/11/2020 dans Développement
Rédigé par :
