Ein One-Stop-Shop für den Vergleich der Funktionen der besten React-Frameworks

Bloggen

Ein One-Stop-Shop für den Vergleich der Funktionen der besten React-Frameworks

UI-Zusammenfassung reagieren

Sie sind Frontend-Entwickler oder -Designer? Wünschen Sie sich einen One-Stop-Shop, in dem Sie sich die verschiedenen Implementierungen gängiger Komponenten ansehen können? Wenn ja, ist React UI Roundup genau das Richtige für Sie!



Ich beschloss, dieses Projekt zu machen beim Beitragen einer Alert-Komponente zu material-ui . Während ich über diese Komponente nachdachte, war es SEHR hilfreich, andere Implementierungen aus allen Bereichen zu überprüfen, von Feature-Set, DOM-Struktur, CSS-Nutzung, Theming-Integration, Prop-Benennung und mehr. Ich wollte etwas, bei dem ich mich aus der Ferne zurücklehnen und mir viele hochwertige Implementierungen einer ähnlichen Komponente ansehen kann, während ich recherchiere - also habe ich dieses Projekt gemacht.

Interview mit Microsoft auf dem Campus

Eine noch bessere Version genau dieses Dokuments ist verfügbar unter reagieren-ui-roundup.dimitrimitropoulos.com . Es verfügt über spezielle Alle-Öffnen-Schaltflächen, mit denen Sie jeden Link in einer Tabelle mit einem Klick öffnen können! Außerdem ist der Abschnitt Framework-Statistiken auf der Website immer auf dem neuesten Stand, da er die Daten in Echtzeit abruft, wenn Sie die Seite laden.



Rahmen

Rahmenstatistik

Name Startseite Repository Sterne Gabeln Ausgaben Lizenz
Ameisen-Design ameise.design Ameisendesign/Ameisendesign 63.025 23.929 494 MIT
Atlanten atlassiandesign bitbucket.org/atlassian/atlaskit-mk-2
Entwurf blueprintjs.com Palantir/Blaupause 16.653 1.716 526 Apache 2.0
Carbon-Design reagieren.kohlenstoffdesignsystem.com carbon-design-system/carbon 3.429 764 410 Apache 2.0
Chakra-UI chakra-ui.com chakra-ui/chakra-ui 10.165 677 85 MIT
Elastische Benutzeroberfläche elastisch.github.io/eui elastisch/eui 2.194 384 359 Apache 2.0
Element element.element.io ElemeFE/element 47.064 11.312 2.016 MIT
Elementare Benutzeroberfläche elementar-ui.com elementar/elementar 4.318 248 fünfzig MIT
Immergrün evergreen.segment.com segmentio/immergrün 10.009 569 76 MIT
Gestalt gestalt.netlify.app Pinterest/Gestalt 3.615 261 12 Apache 2.0
Tülle v2.grommet.io grommiert / grommiert 6.594 790 233 Apache 2.0
Material-UI material-ui.com mui-org/material-ui 60.626 17.805 460 MIT
Onsen-Benutzeroberfläche onsen.io Onsen-Benutzeroberfläche / Onsen-Benutzeroberfläche 8.072 918 141 Apache 2.0
Orbit orbit.kiwi kiwicom/orbit 697 66 55 MIT
Erstreaktion primefaces.org/primereact Primefaces/Primeract 1.508 370 211 MIT
Quasar quasar.dev Quasargerüst/Quasar 16.056 1.864 225 MIT
Bootstrap reagieren reagieren-bootstrap.github.io Reagieren-Bootstrap/Reagieren-Bootstrap 18.205 2.910 96 MIT
Reaktions-Toolbox reagieren-toolbox.io Reagieren-Toolbox/Reagieren-Toolbox 8.630 1.050 262 MIT
reagieren-md reagieren-md.mlaursen.com mlaursen/react-md 2.118 308 41 MIT
Benutzeroberfläche klingeln jetbrains.github.io/ring-ui JetBrains/ring-ui 2.484 131 10 Apache 2.0
Semantische Benutzeroberfläche semantic-ui.com Semantische Organisation/Semantische Benutzeroberfläche 48.410 5.081 1.016 MIT
Glatte Benutzeroberfläche smooth-code.com/open-source/smooth-ui smooth-code/smooth-ui 1.530 111 10 MIT
UI-Fabric developer.microsoft.com/en-us/fluentui microsoft/fluentui 9.307 1.685 953 Sonstiges
Zendesk-Garten garden.zendesk.com zendeskgarden/react-components 787 51 10 Apache 2.0

Alle oben genannten Statistiken wurden zuletzt am Do, 03. September 2020 00:36:11 GMT aktualisiert. Für Echtzeitdaten, siehe Webseite .

Framework-Funktionen

Kriterien
  • |_+_|: Das Projekt wurde mit Blick auf das Dark-Mode-Styling erstellt. Ein sofort einsatzbereiter Dunkelmodus wird entweder auf der Dokumentationsseite selbst verwendet oder ist gut dokumentiert und einfach zu konfigurieren.
  • |_+_|: Für Designer gibt es vorgefertigte Ressourcen wie Sketch- oder Figma-Downloadpakete.
  • |_+_|: Explizite Unterstützung von rechts nach links für die Verwendung in Apps mit Sprachen wie Arabisch, Hebräisch oder Persisch.
  • |_+_|: Ein benutzerinteragierbarer Themenbereich, in dem Designer und Entwickler mit Look and Feel herumspielen können, ohne programmieren zu müssen.
  • |_+_|: Ist entweder (idealerweise) in TypeScript geschrieben oder hat TypeScript-Definitionen direkt im Projekt. DefinitelyTyped qualifiziert sich nicht.
Name Nativer dunkler Modus Design-Kits RTL-Unterstützung Thema Natives TypeScript
Ameisen-Design ✔️ Figma , Skizzieren ✔️ Verknüpfung ✔️
Atlanten Skizzieren
Entwurf ✔️ Skizzieren ✔️ ✔️
Carbon-Design ✔️ Skizzieren ✔️ Verknüpfung
Chakra-UI ✔️
Elastische Benutzeroberfläche ✔️ Skizzieren ✔️
Element Ahure , Skizzieren Verknüpfung
Elementare Benutzeroberfläche
Immergrün Skizzieren
Gestalt ✔️
Tülle Brauch , Framer X , Skizzieren ✔️ Verknüpfung ✔️
Material-UI ✔️ Figma , Skizzieren ✔️ Verknüpfung ✔️
Onsen-Benutzeroberfläche ✔️ ✔️
Orbit Abstrakt , Skizzieren ✔️ Verknüpfung
Erstreaktion ✔️
Quasar ✔️ ✔️ Verknüpfung ✔️
Bootstrap reagieren ✔️
Reaktions-Toolbox ✔️
reagieren-md ✔️ ✔️
Benutzeroberfläche klingeln
Semantische Benutzeroberfläche Skizzieren ✔️
Glatte Benutzeroberfläche ✔️
UI-Fabric ✔️ Figma , Skizzieren ✔️
Zendesk-Garten ✔️ ✔️

Komponenten

Alarm

Warnungen werden verwendet, um Benutzern eine wichtige Nachricht anzuzeigen.



Kriterien
  • |_+_|: Die Warnung hat eine vorkonfigurierte Möglichkeit, sie zu schließen, normalerweise mit einem |_+_| Stütze.
  • |_+_|: Der Alarm hat fertige Variationen.
Rahmen Name Verschließbar Typen
Ameisen-Design Alarm ✔️ |_+_|, |_+_|, |_+_|, |_+_|
Atlanten AbschnittNachricht |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
Atlanten Flagge |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
Chakra-UI Alarm ✔️ |_+_|, |_+_|, |_+_|, |_+_|
Element Alarm ✔️ |_+_|, |_+_|, |_+_|, |_+_|
Elementare Benutzeroberfläche Alarm |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
Immergrün Alarm ✔️ |_+_|, |_+_|, |_+_|, |_+_|
Material-UI Alarm ✔️ |_+_|, |_+_|, |_+_|, |_+_|
Orbit Alarm ✔️ |_+_|, |_+_|, |_+_|, |_+_|
Quasar Banner
Bootstrap reagieren Alarm ✔️ |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
Benutzeroberfläche klingeln Alarm ✔️ |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
Glatte Benutzeroberfläche Alarm |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
UI-Fabric Nachrichtenleiste ✔️ |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
Zendesk-Garten Benachrichtigung ✔️ |_+_|, |_+_|, |_+_|, |_+_|

Entwurf , Carbon-Design , Elastische Benutzeroberfläche , Gestalt , Tülle , Onsen-Benutzeroberfläche , Erstreaktion , Reaktions-Toolbox , reagieren-md , und Semantische Benutzeroberfläche scheint eine Alert-Komponente zu fehlen. Bitte reichen Sie ein Problem ein falls es jetzt eine gibt.

Taste

Benutzer lösen Aktionen aus, indem sie auf Schaltflächen klicken.

Kriterien
  • |_+_|: Ein |_+_| prop existiert für Situationen, in denen der Benutzer nicht mit der Schaltfläche interagieren kann.
  • |_+_|: Eine ButtonGroup-Komponente ist in der Bibliothek vorhanden, oder andere solche vorgefertigten Methoden zum Erstellen von Schaltflächengruppen.
  • |_+_|: Ein Symbol kann entweder links oder rechts vom Text eingefügt werden, oder eine Schaltfläche kann nur mit einem Symbol und ohne Text verwendet werden (notiert als |_+_|).
  • |_+_|: Die Schaltfläche hat einen vorgefertigten Ladezustand für asynchrone Ereignisse.
  • |_+_|: Die Größe der Schaltfläche kann einfach zwischen verschiedenen (und konsistenten) Hauptgrößen angepasst werden.
Rahmen Name Deaktiviert Gruppierbar Symbol Wird geladen Größen
Ameisen-Design Taste ✔️ ✔️ |_+_|, |_+_|, |_+_| ✔️ |_+_|, |_+_|, |_+_|
Atlanten Taste ✔️ ✔️ |_+_|, |_+_| ✔️
Entwurf Taste ✔️ ✔️ |_+_|, |_+_|, |_+_| ✔️ |_+_|, |_+_|
Carbon-Design Taste ✔️ ✔️ |_+_|, |_+_| ✔️ |_+_|, |_+_|, |_+_|
Chakra-UI Taste ✔️ |_+_|, |_+_|, |_+_| |_+_|, |_+_|, |_+_|, |_+_|
Elastische Benutzeroberfläche Taste ✔️ ✔️ |_+_|, |_+_|, |_+_| ✔️ |_+_|, |_+_|, |_+_|
Element Taste ✔️ ✔️ |_+_|, |_+_|, |_+_| ✔️ |_+_|, |_+_|, |_+_|, |_+_|
Elementare Benutzeroberfläche Taste ✔️ |_+_|, |_+_|, |_+_|, |_+_|
Immergrün Taste ✔️ ✔️ |_+_|, |_+_|, |_+_| ✔️ |_+_|
Gestalt Taste ✔️ |_+_| |_+_|, |_+_|, |_+_|
Tülle Taste ✔️ |_+_|, |_+_|, |_+_|
Material-UI Taste ✔️ ✔️ |_+_|, |_+_|, |_+_| |_+_|, |_+_|, |_+_|
Onsen-Benutzeroberfläche Taste ✔️ |_+_|, |_+_|
Orbit Taste ✔️ ✔️ |_+_|, |_+_|, |_+_| ✔️ |_+_|, |_+_|, |_+_|
Erstreaktion Taste |_+_|, |_+_|, |_+_|
Quasar btn ✔️ ✔️ |_+_|, |_+_|, |_+_| ✔️ |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
Bootstrap reagieren Taste ✔️ ✔️ |_+_|, |_+_|
Reaktions-Toolbox Taste ✔️ |_+_|, |_+_|
reagieren-md Taste ✔️ |_+_|, |_+_|, |_+_|
Benutzeroberfläche klingeln Taste ✔️ ✔️ |_+_|, |_+_| ✔️ |_+_|, |_+_|, |_+_|
Semantische Benutzeroberfläche Taste ✔️ ✔️ |_+_|, |_+_|, |_+_| ✔️ |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
Glatte Benutzeroberfläche Taste ✔️ |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
UI-Fabric Taste ✔️
Zendesk-Garten Taste ✔️ ✔️ |_+_| |_+_|, |_+_|, |_+_|

Kontrollkästchen

Benutzer schalten mit Kontrollkästchen zwischen aktivierten, nicht aktivierten (oder unbestimmten) Werten um.

Kriterien
  • |_+_|: Ein benutzerdefiniertes Symbol kann anstelle des Kontrollkästchens selbst über eine Stütze oder ein Kind bereitgestellt werden.
  • |_+_|: Das Kontrollkästchen hat ein |_+_| Status, der angibt, dass der Benutzer nicht damit interagieren kann
  • |_+_|: Das Kontrollkästchen hat einen unbestimmten Zustand.
  • |_+_|: Das Kontrollkästchen hat ein |_+_| oder |_+_| Zustand.
  • |_+_|: Der Text kann an verschiedenen Stellen um das Kontrollkästchen herum positioniert werden.
Rahmen Name Benutzerdefiniertes Symbol Deaktiviert Unbestimmt Ungültig Etikettenplatzierung
Ameisen-Design Kontrollkästchen ✔️ ✔️ |_+_|
Atlanten Kontrollkästchen ✔️ ✔️ ✔️ |_+_|
Entwurf Kontrollkästchen ✔️ |_+_|, |_+_|
Carbon-Design Kontrollkästchen ✔️ ✔️ |_+_|
Chakra-UI Kontrollkästchen ✔️ ✔️ ✔️ |_+_|
Elastische Benutzeroberfläche Kontrollkästchen ✔️ ✔️ |_+_|
Element Kontrollkästchen ✔️ ✔️ |_+_|
Elementare Benutzeroberfläche Kontrollkästchen |_+_|
Immergrün Kontrollkästchen ✔️ ✔️ ✔️ |_+_|
Gestalt Kontrollkästchen ✔️ ✔️ ✔️ |_+_|
Tülle Kontrollkästchen ✔️ ✔️ |_+_|
Material-UI Kontrollkästchen ✔️ ✔️ ✔️ |_+_|, |_+_|, |_+_|, |_+_|
Onsen-Benutzeroberfläche Kontrollkästchen ✔️ ✔️ ✔️ |_+_|
Orbit Kontrollkästchen ✔️ ✔️ |_+_|
Erstreaktion Kontrollkästchen ✔️ |_+_|
Quasar Kontrollkästchen ✔️ ✔️ |_+_|, |_+_|
Bootstrap reagieren Form.Check ✔️
Reaktions-Toolbox Kontrollkästchen ✔️ |_+_|
reagieren-md Kontrollkästchen ✔️ ✔️ |_+_|
Benutzeroberfläche klingeln Kontrollkästchen ✔️ |_+_|
Semantische Benutzeroberfläche Kontrollkästchen ✔️ ✔️ |_+_|
Glatte Benutzeroberfläche Kontrollkästchen ✔️ |_+_|
UI-Fabric Kontrollkästchen ✔️ ✔️ |_+_|, |_+_|
Zendesk-Garten Kontrollkästchen ✔️ ✔️ |_+_|

Fehlergrenze

Fehlergrenzen sind eine spezifische Funktion von React 16+, die die KomponenteDidCatch API zum Umgang mit nicht erfassten Fehlern, ohne den gesamten React-Komponentenbaum auszuhängen.

Kriterien
  • |_+_|: Hat eine oder mehrere Requisiten, die verwendet werden können, um einen benutzerdefinierten Titel und/oder eine Beschreibung bereitzustellen (als Zeichenfolge, nicht als ReactNode).
  • |_+_|: Hat eine Stütze, die verwendet werden kann, um einen benutzerdefinierten ReactNode-Fallback bereitzustellen, der das Datum von |_+_| nicht erhält.
  • |_+_|: Hat eine Stütze, die verwendet werden kann, um einen benutzerdefinierten ReactNode für Fallback bereitzustellen, der die Daten von |_+_| empfängt.
Rahmen Name Benutzerdefinierter Text Drop-In-JSX-Fallback Wrapper-JSX-Fallback
Ameisen-Design Alert.ErrorBoundary ✔️
Carbon-Design Fehlergrenze ✔️
Elastische Benutzeroberfläche Fehlergrenze

Atlanten , Entwurf , Chakra-UI , Element , Elementare Benutzeroberfläche , Immergrün , Gestalt , Tülle , Material-UI , Onsen-Benutzeroberfläche , Orbit , Erstreaktion , Quasar , Bootstrap reagieren , Reaktions-Toolbox , reagieren-md , Benutzeroberfläche klingeln , Semantische Benutzeroberfläche , Glatte Benutzeroberfläche , UI-Fabric , und Zendesk-Garten scheint eine ErrorBoundary-Komponente zu fehlen. Bitte reichen Sie ein Problem ein falls es jetzt eine gibt.

Stepper

Navigation, die Benutzer durch die Schritte einer Aufgabe führt.

sql kochbuch o'reilly pdf
Kriterien
  • |_+_|: Die Stufen können vertikal gestapelt werden.
  • |_+_|: Ein Benutzer kann auf den Schritt selbst klicken, um zu navigieren.
  • |_+_|: Ein Schritt kann einen Subtext mit einer Beschreibung haben.
  • |_+_|: Ein Schritt mit einem Fehler kann für den Benutzer leicht identifiziert werden.
  • |_+_|: Die Schritte haben eine Stütze, wodurch sie mit benutzerdefinierten Symbolen versehen werden können.
Rahmen Name Kann vertikal sein Anklickbar Schrittbeschreibung Schrittfehler Schritt-Symbol
Ameisen-Design Schritte ✔️ ✔️ ✔️ ✔️ ✔️
Atlanten ProgressTracker ✔️
Carbon-Design Fortschrittsanzeige ✔️ ✔️ ✔️ ✔️
Elastische Benutzeroberfläche Schritte ✔️
Element Schritte ✔️ ✔️ ✔️ ✔️
Material-UI Stepper ✔️ ✔️ ✔️ ✔️ ✔️
Erstreaktion Schritte ✔️
Quasar Stepper ✔️ ✔️ ✔️ ✔️ ✔️
Semantische Benutzeroberfläche Schritte ✔️ ✔️ ✔️ ✔️
Zendesk-Garten Stepper

Entwurf , Chakra-UI , Elementare Benutzeroberfläche , Immergrün , Gestalt , Tülle , Onsen-Benutzeroberfläche , Orbit , Bootstrap reagieren , Reaktions-Toolbox , reagieren-md , Benutzeroberfläche klingeln , Glatte Benutzeroberfläche , und UI-Fabric scheint eine Stepper-Komponente zu fehlen. Bitte reichen Sie ein Problem ein falls es jetzt eine gibt.

Schalter

Wird zum Umschalten zwischen zwei Zuständen verwendet: Ein und Aus.

Kriterien
  • |_+_|: Der Schalter hat ein |_+_| Status, der angibt, dass der Benutzer nicht damit interagieren kann.
  • |_+_|: Der Schalter hat die Fähigkeit, einen unbestimmten Zustand anzuzeigen.
  • |_+_|: Der Schalter hat eine Stütze (oder ein untergeordnetes Element), um benutzerdefinierte Symbole in den Bereich des Schalters aufzunehmen (z. B. ein |_+_|- und ein |_+_|-Symbol).
  • |_+_|: Der Schalter hat eine Stütze (oder ein untergeordnetes Element), um benutzerdefinierten Text in den Bereich des Schalters aufzunehmen (z. B. den Text |_+_| und |_+_|).
  • |_+_|: Wo am Schalter ein Etikett angebracht werden kann.
  • |_+_|: Der Schalter hat ein |_+_| Zustand, der einen ausstehenden Zustand einer Schalteraktion anzeigt.
  • |_+_|: Das Label hat native, vorkonfigurierte Größenoptionen.
Rahmen Name Deaktiviert Unbestimmt Interne Symbole Interner Text Etikettenplatzierung Wird geladen Größen
Ameisen-Design Schalter ✔️ ✔️ ✔️ ✔️ |_+_|, |_+_|
Atlanten Umschalten ✔️ |_+_|, |_+_|
Entwurf Schalter ✔️ ✔️ |_+_|, |_+_| |_+_|, |_+_|
Carbon-Design Schalter ✔️ |_+_| |_+_|, |_+_|
Chakra-UI Schalter ✔️ |_+_|, |_+_| |_+_|, |_+_|, |_+_|
Elastische Benutzeroberfläche Schalter ✔️ |_+_| |_+_|, |_+_|
Element Schalter ✔️ |_+_|, |_+_|
Immergrün Schalter ✔️ |_+_|
Gestalt Schalter ✔️
Tülle Kontrollkästchen ✔️ |_+_|, |_+_|
Material-UI Schalter ✔️ |_+_|, |_+_|, |_+_|, |_+_| |_+_|, |_+_|
Onsen-Benutzeroberfläche Schalter ✔️
Erstreaktion InputSwitch ✔️
Quasar Umschalten ✔️ ✔️ |_+_|, |_+_| |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
Bootstrap reagieren Form.Check ✔️ |_+_|
Reaktions-Toolbox Schalter ✔️ |_+_|
Benutzeroberfläche klingeln Umschalten ✔️ |_+_|, |_+_|
Glatte Benutzeroberfläche Schalter ✔️ ✔️ |_+_|, |_+_|, |_+_|, |_+_|, |_+_|
UI-Fabric Umschalten ✔️ |_+_|, |_+_|
Zendesk-Garten Umschalten |_+_|, |_+_|

Elementare Benutzeroberfläche , Orbit , reagieren-md , und Semantische Benutzeroberfläche scheint eine Switch-Komponente zu fehlen. Bitte reichen Sie ein Problem ein falls es jetzt eine gibt.

Registerkarten

Benutzer wechseln mit Registerkarten zwischen verschiedenen Ansichten.

Kriterien
  • |_+_|: Die Registerkarten können vertikal gestapelt werden.
Rahmen Name Kann vertikal sein
Ameisen-Design Registerkarten ✔️
Atlanten Registerkarten
Entwurf Registerkarten ✔️
Carbon-Design Registerkarten
Chakra-UI Registerkarten ✔️
Elastische Benutzeroberfläche Registerkarten
Element Registerkarten ✔️
Immergrün Tablist ✔️
Gestalt Registerkarten
Tülle Registerkarten
Material-UI Registerkarten ✔️
Onsen-Benutzeroberfläche Sicher
Erstreaktion TabView
Quasar Registerkarten ✔️
Bootstrap reagieren Registerkarten
Reaktions-Toolbox Registerkarten
reagieren-md Registerkarten
Benutzeroberfläche klingeln Registerkarten
Semantische Benutzeroberfläche Registerkarten
UI-Fabric Drehpunkt
Zendesk-Garten Registerkarten ✔️

Elementare Benutzeroberfläche , Orbit , und Glatte Benutzeroberfläche scheint eine Tabs-Komponente zu fehlen. Bitte reichen Sie ein Problem ein falls es jetzt eine gibt.

Wie man eine Änderung vornimmt

Das README.md und Website werden beide automatisch aus denselben Quelleingabedateien generiert. Der Einfachheit halber gibt es genau eine Datei für jedes Projekt, die alle Informationen für dieses Projekt enthält, die sich in der |_+_| . Um einen bestimmten Datenpunkt zu aktualisieren, nehmen Sie einfach eine Änderung an einer dieser Dateien vor und führen Sie |_+_| aus.

Download-Details:

Autor: Dimitropoulos

Demo: https://react-ui-roundup.dimitrimitropoulos.com/

Quellcode: https://github.com/dimitropoulos/react-ui-roundup