🥑 👩🏼‍🎤 🐽 10 composants React pour toutes les occasions 🧖🏽 ☝🏼 🤲🏻

Je crois que pour résoudre diverses tâches de développement de React, il est préférable d'utiliser de petits outils hautement spécialisés, plutôt que des solutions universelles offertes par les bibliothèques de composants. J'aime choisir des composants par moi-même, je n'aime pas lire une longue documentation et je veux éviter les mises à jour de bibliothèque sans signification, après quoi quelque chose dans le projet se casse souvent.

Une certaine bibliothèque frontale est en mesure de donner au développeur une conception uniforme des composants, ce qui est extrêmement important. Mais il peut s'avérer que le projet dans lequel il est prévu d'utiliser une telle bibliothèque possède déjà son propre système de conception, ou sa propre bibliothèque d'interface utilisateur. Dans une telle situation, le développeur ne recherche pas une nouvelle bibliothèque, mais uniquement des composants personnalisés adaptés à la réutilisation et à l'accélération du travail. Dans un tel cas, je vois plus de sens dans la recherche d'un composant séparé, plutôt que d'une bibliothèque entière, qui contient, en même temps, ce dont un développeur a vraiment besoin, beaucoup de choses dont il n'a absolument pas besoin.

Le matériel, dont nous publions la traduction aujourd'hui, est consacré à l'histoire de 10 composants React.

1. React Awesome Slider - «carrousels»

Le composant React Awesome Slider vous permet de créer des transitions fluides, belles et hautement personnalisables. Il s'agit d'un très petit composant (7 Ko) pris en charge par tous les principaux navigateurs. Voici une page de démonstration de React Awesome Slider.

2. React Data Grid - tableaux

React Data Grid est un composant puissant, rapide et facile à utiliser qui vous permet d'afficher quelque chose comme une feuille de calcul Excel sur une page. Il sait comment traiter les commandes du clavier, copier et coller des données et, en général, se comporte comme une feuille de calcul se comporte généralement. Ce composant fournit au développeur une API simple, qui peut être traitée très rapidement. Voir des exemples de son utilisation ici .

3. CogoToast - notifications

Trouver un composant pour implémenter des notifications, étant donné le nombre de ces composants, n'est pas une tâche facile. Il existe de nombreux excellents composants de ce type, mais ici, je voudrais parler de mon préféré, du CogoToast simple et compréhensible . Le package de composants est de taille modeste (4 Ko), il possède une API simple et son apparence soignée convient bien à de nombreux projets. Voici la page GogoToast avec des exemples d'utilisation de ce composant.

4. Google Maps React - cartes

Google Maps React est un composant assez populaire qui accélère et facilite le placement (avec les coordonnées) d'autres composants React sur une carte Google.

5. React Tooltip - info-bulles

React Tooltip est un composant d'implémentation des info-bulles qui prend en charge de nombreux paramètres. Il s'adapte bien à n'importe quelle conception d'interface. Ce composant vous permet de faire tout ce dont vous pourriez avoir besoin avec des info-bulles. Par exemple, il prend en charge les événements personnalisés, les retards, les mises à jour interactives pour le contenu des info-bulles, etc.

6. React Block UI - écrans de chargement et de blocage

React Block UI est un composant facile à utiliser qui empêche les utilisateurs d'interagir avec l'interface de la page lors du chargement de quoi que ce soit.

7. React Credit Cards - formulaire de saisie des données de paiement

Je n'avais pas prévu d'inclure dans cette revue quelque chose comme "le meilleur composant pour saisir les données de paiement", mais React Credit Cards n'est qu'un charmant élément dont je ne peux que parler. Il est personnalisable, travailler avec lui est simple et agréable. Il détermine, entre autres, automatiquement à quelle entreprise correspond le numéro de carte saisi, puis affiche l'image de la carte avec le logo correspondant.

8. React Markdown - rendu du balisage Markdown

React Markdown est une solution rapide et pratique pour le rendu du balisage Markdown (y compris HTML). Lui, comme les autres composants de cette revue, ne peut résoudre qu'un seul problème, mais il fait très bien son travail.

9. Coloreact - un outil pour choisir les couleurs

De nombreuses bibliothèques d'interface utilisateur fournissent aux développeurs leurs propres outils pour choisir les couleurs, mais Coloreact combine l'équilibre parfait entre facilité d'utilisation et personnalisation. Il permet au développeur de personnaliser son apparence et son comportement, sans avoir besoin de beaucoup de temps pour étudier ses propres mécanismes.

10. React Big Calendar - Calendrier

Si vous avez besoin d'un composant de calendrier équipé de toutes les fonctionnalités des calendriers "professionnels", cela signifie que vous devriez jeter un œil à React Big Calendar . Il offre au développeur de nombreuses opportunités et paramètres - fonctions de planification, localisation, formatage de la date et de l'heure, et bien plus encore.

Chers lecteurs! Quels composants React hautement spécialisés utilisez-vous le plus souvent?

10 composants React pour toutes les occasions