🤟 💃🏾 🔧 10 Komponenten für alle Gelegenheiten reagieren 🆖 ↔️ 🧖🏻

Ich glaube, dass es zur Lösung verschiedener React-Entwicklungsaufgaben besser ist, kleine hochspezialisierte Tools zu verwenden, als universelle Lösungen, die von Komponentenbibliotheken angeboten werden. Ich wähle Komponenten gerne selbst aus, lese nicht gerne lange Dokumentationen und möchte bedeutungslose Bibliotheksaktualisierungen vermeiden, nach denen in einem Projekt häufig Probleme auftreten.

Eine bestimmte Front-End-Bibliothek kann dem Entwickler ein einheitliches Design der Komponenten bieten, was äußerst wichtig ist. Es kann sich jedoch herausstellen, dass das Projekt, in dem eine solche Bibliothek verwendet werden soll, bereits über ein eigenes Entwurfssystem oder eine eigene UI-Bibliothek verfügt. In einer solchen Situation sucht der Entwickler nicht nach einer neuen Bibliothek, sondern nur nach benutzerdefinierten Komponenten, die zur Wiederverwendung und Beschleunigung der Arbeit geeignet sind. In diesem Fall sehe ich mehr Sinn in der Suche nach einer separaten Komponente als in einer ganzen Bibliothek, die gleichzeitig enthält, was ein Entwickler wirklich braucht, viele Dinge, die er absolut nicht braucht.

Das Material, dessen Übersetzung wir heute veröffentlichen, ist der Geschichte von 10 React-Komponenten gewidmet.

1. Reagiere auf Awesome Slider - "Karussells"

Mit der React Awesome Slider- Komponente können Sie glatte, schöne und hochgradig anpassbare Übergänge erstellen. Dies ist eine sehr kleine (7 KB) Komponente, die von allen gängigen Browsern unterstützt wird. Hier ist eine Demoseite von React Awesome Slider.

2. React Data Grid - Tabellen

React Data Grid ist eine leistungsstarke, schnelle und benutzerfreundliche Komponente, mit der Sie so etwas wie ein Excel-Arbeitsblatt auf einer Seite anzeigen können. Er weiß, wie man Tastaturbefehle verarbeitet, Daten kopiert und einfügt, und verhält sich im Allgemeinen so, wie sich eine Tabelle normalerweise verhält. Diese Komponente bietet dem Entwickler eine einfache API, die sehr schnell bearbeitet werden kann. Beispiele für die Verwendung finden Sie hier .

3. CogoToast - Benachrichtigungen

Es ist keine leichte Aufgabe, eine Komponente zum Implementieren von Benachrichtigungen zu finden, wenn man bedenkt, wie viele solcher Komponenten vorhanden sind. Es gibt viele hervorragende Komponenten dieser Art, aber hier möchte ich über meinen Favoriten sprechen, über den einfachen und verständlichen CogoToast . Das Komponentenpaket hat eine bescheidene Größe (4 KB), eine einfache API und ein ordentliches Erscheinungsbild, das sich für viele Projekte eignet. Hier ist die GogoToast-Seite mit Beispielen für die Verwendung dieser Komponente.

4. Google Maps React - Karten

Google Maps React ist eine recht beliebte Komponente, die die Platzierung (mit Koordinaten) anderer React-Komponenten auf einer Google-Karte beschleunigt und erleichtert.

5. Tooltip reagieren - Tooltips

React Tooltip ist eine Tooltip-Implementierungskomponente, die viele Einstellungen unterstützt. Es passt gut zu jedem Interface-Design. Mit dieser Komponente können Sie mit Tooltips alles tun, was Sie benötigen. Beispielsweise werden benutzerdefinierte Ereignisse, Verzögerungen, interaktive Aktualisierungen für Tooltip-Inhalte und mehr unterstützt.

6. React Block UI - Laden und Blockieren von Bildschirmen

Die React Block-Benutzeroberfläche ist eine benutzerfreundliche Komponente, die verhindert, dass Benutzer beim Laden mit der Seitenoberfläche interagieren.

7. Kreditkarten reagieren - Formular zur Eingabe von Zahlungsdaten

Ich hatte nicht vor, in diese Bewertung so etwas wie „die beste Komponente für die Eingabe von Zahlungsdaten“ aufzunehmen, aber React Credit Cards ist nur eine charmante Komponente, über die ich nur erzählen kann. Es ist anpassbar, die Arbeit damit ist einfach und angenehm. Es ermittelt unter anderem automatisch, welcher Firma die eingegebene Kartennummer entspricht, und zeigt dann das Bild der Karte mit dem entsprechenden Logo an.

8. Markdown reagieren - Rendern des Markdown-Markups

React Markdown ist eine schnelle und bequeme Lösung zum Rendern von Markdown-Markups (einschließlich HTML). Er kann, wie die anderen Komponenten aus dieser Überprüfung, nur ein Problem lösen, aber er macht seine Arbeit sehr gut.

9. Coloreact - ein Werkzeug zur Auswahl von Farben

Viele UI-Bibliotheken bieten Entwicklern ihre eigenen Tools zur Auswahl von Farben, aber Coloreact kombiniert die perfekte Balance zwischen Benutzerfreundlichkeit und Anpassung. Dadurch kann der Entwickler sein Erscheinungsbild und Verhalten anpassen, ohne viel Zeit für die Untersuchung seiner eigenen Mechanismen zu benötigen.

10. Großer Kalender reagieren - Kalender

Wenn Sie eine Kalenderkomponente benötigen, die mit allen Funktionen der "professionellen" Kalender ausgestattet ist, sollten Sie sich React Big Calendar ansehen . Es bietet dem Entwickler viele Möglichkeiten und Einstellungen - Planungsfunktionen, Lokalisierung, Datums- und Uhrzeitformatierung und vieles mehr.

Liebe Leser! Welche hochspezialisierten React-Komponenten verwenden Sie am häufigsten?

10 Komponenten für alle Gelegenheiten reagieren