React Components

Source: https://github.com/brillout/awesome-react-components at 66b2758c4808
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

🚀 Absolut fantastisch React Komponenten & Bibliotheken

Dies ist eine Liste von fantastischen Komponenten. Nein, es ist keine umfassende Liste von jedem React Komponente unter der Sonne. Was bedeutet “großartig”? Nun,

• Es löst ein echtes Problem
• Dies geschieht auf eine einzigartige, wunderschöne oder außergewöhnliche Weise. (Und es ist nicht sehr beliebt und bekannt … es hat keinen Sinn, diese aufzulisten.)
• Es hat kürzlich code Commits!

Suchen Sie nach einem 🚀 für wirklich erstaunliche Projekte. Und suchen sie nach quickie-maintainer-kommentar und bewertungen in (italic parens) nach einigen notizen.

Siehe auch: Awesome React Frameworks.

Instandhaltungspersonal:

• @petebray, author of Fluxguard — monitor PROD website changes.
• @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.

Beitrag

Bitte überprüfen Sie unsere BeitragsleitlinienWir halten diese Liste frisch, indem wir von allen PRs verlangen, dass sie einen oder mehrere nicht geniale Einträge aus dieser Liste entfernen**. Bitte PR eine neue Ressource, wenn Sie auch eine entfernen.

Inhaltsverzeichnis

• UI Komponenten
  • Editierbares Datengitter/Tabelle
  • Tabelle
  • Unendlicher Scroll
  • Überlagerung
  • Anmeldung
  • Tooltip
  • Menü
  • klebrig
  • Tabs
  • Beladung
  • Captcha
  • Karussell
  • Knöpfe
  • Kollaps
  • Karte
  • Kommandopalette
  • Baum
  • UI Navigation
  • Custom Scrollbar
  • Audio/Video
  • Karte
  • Uhrzeit / Datum / Alter
  • Foto / Bild
  • Icons
  • Paginator
  • Markdown Betrachter
  • Leinwand
  • Bildschirmfoto
  • Verschiedenes
  • Formteile
    • Datum / Zeitmesser
    • Emoji-Pflücker
    • Inputarten
    • Autovervollständigung
    • Wählen
    • Farbwähler
    • Umschalter
    • Schieber
    • Funktaste
    • Typ ausgewählt
    • Tag-Input
    • Automatisierte Eingabe / Textarea
    • Star Rating
    • Drag und Drop
    • Sortierbare Liste
    • Rich Text Editor
    • Markdown Herausgeber
    • Bildbearbeitung
    • Form Component Collections
    • Verschiedenes
    • Syntax Highlight
• UI Layout
• UI Animation
  • Parallaxen
• UI Rahmen
  • Reaktionsweise
    • Material Design
  • Mobil
  • Komponentensammlungen
• UI Versorgungsunternehmen
  • Reporter
    • Sichtbarkeitsmelder
    • Mess-Reporter
  • Geräteeingang
    • Keyboard Events
    • Scroll-Events
    • Touch Swipe
    • Mouse Events
  • Meta-Tags
  • Portal
  • Testbenutzerverhalten
• Code Design
  • Datenspeicher
  • Form Logic
  • Router
  • Requisiten vom Server
  • Kommunikation mit dem Server
  • CSS / Stil
  • HTML Meldebogen
  • Isomorphe Apps
  • Boilerplate
  • Verschiedenes
• Versorgungsunternehmen
  • i18n
  • Framework-Bindungen / Integrationen
  • Integrationen mit Drittanbieterdiensten
• Leistung
  • UI
    • Inspektion
    • Lazy Load
  • App Größe
  • Server-Side Rendering
• Dev Tools
  • Test
  • Redux
  • Inspektion
  • Verschiedenes
• Verschiedenes
  • Statischer Website Generator
• Cloud-Lösungen
  • Datenbanken

UI Komponenten

Back to top ⬆️

Editierbares Datengitter/Tabelle

• AG Grid - Advanced Data Grid / Data Table unterstützt Javascript / React / AngularJS / Webkomponenten.
• fortune-sheet - Eine Online-Spreedsheet-Komponente, die Out-of-the-Box-Funktionen wie Excel bietet.
• gigatables-react - Sortierung, Paginierung/Infinite Scroll, globale/Spaltensuche, AJAX CRUD und mehr.
• Handsontable - demo - docs - Data Grid mit Tabellenkalkulation UI Stützen React, Angular, TypeScript und JavaScript.
• jqwidgets-react-grid - Filtern, Paginieren, Gruppieren, Exportieren nach Excel, PDFCRUD und mehr.
• MUI X Data grid - demo/docs - Schnelles und anpassbares Datenraster mit erweiterten Funktionen für Power User und komplexe Anwendungsfälle.
• react-data-grid - Excel-ähnliches Raster.
• ReactGrid - demo/docs - Fügen Sie Tabellenkalkulationsverhalten zu Ihrer App hinzu
• revo-grid - demo/docs Leistungsstarkes Data Grid für React / AngularJS / Vue / Web-Komponenten mit erweiterter Anpassung.
• SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
• SVAR React DataGrid - demo - docs - React DataGrid mit In-Cell-Bearbeitung, Baumdaten, Kontextmenü, virtuellem Scrollen usw.

Tabelle

• ka-table - demo Anpassbare Tabellenkomponente mit Sortierung, Filterung, Gruppierung, Virtualisierung, Bearbeitung usw.

• mantine-datatable - demo/docs Leichte Tischkomponente für Mantine UI Anwendungen, mit vielen Features

• material-table - demo/docs - Gebaut auf Material UI, plus: Gruppierung, Baumdaten, erweiterbare Zeilen, Export, Inline-Bearbeitung

• mui-datatables - gebaut auf Material UISuchen, Styling, Filtern, Größenänderung/Ausblenden von Spalten, Exportieren, Drucken, Auswählen/Erweitern von Zeilen.

• react-data-table - demo/docs - zugängliche, responsive, themengebundene, deklarativ konfigurierbare Tabelle mit Sortierung, auswählbaren Zeilen, erweiterbaren Zeilen, Paginierung

• TanStack Table - demo - Headless UI für den Aufbau leistungsfähiger Tabellen & Datagrids

• react-table-library - demo - React Tischbibliothek - eine fast kopflose Tischbibliothek - um bessere Tische zu bauen.

• rsuite-table - demo/docs - Eine Tabellenkomponente, die virtualisiert unterstützt.

• DevExtreme React Grid - Hochleistungs-Plugin-basiertes Datenraster für Bootstrap und Material Design.

• Smart React Grid - Schnelles und funktionsvollständiges Datenraster mit Material Design.

• simple-table - demo - docs Leichtgewichtig, schnell und funktionsreich. Sortieren/Filtern, Virtualisierung, Baumdaten, verschachtelte Header, gepinnte Spalten, angepasstes Styling etc.

• KendoReact Grid - Leistungsstarke Datengitterkomponente mit über 100 gebrauchsfertigen Funktionen wie Paging, Sortierung, Export nach Excel und mehr.

• Material-React-Table - Ein voll ausgestattetes Material UI V5-Implementierung von TanStack React Tabelle V8, geschrieben von Grund auf in TypeScript

Unendlicher Scroll

• @egjs/react-infinitegrid - npm - demo Ein Modul, das verwendet wird, um Kartenelemente einschließlich Inhalt unendlich nach verschiedenen Layout-Typen anzuordnen.
• react-lazyload - Lazyloaden Sie Ihre Komponente, Ihr Image oder etwas anderes, wo die Leistung wichtig ist.
• react-list - Eine vielseitige unendliche Rolle React Bauteil.
• @af-utils/virtual - demo/docs - Rendern Sie große scrollbare Listen und Gitter.
• react-window - demo - React Komponenten zum effizienten Rendern großer Listen und tabellarischer Daten
• virtua - demo - Eine Zero-Config, schnelle und kleine (~3kB) virtuelle Listenkomponente für React, Vue und Solid.

Überlagerung

Display Overlay / Modal / Alarm / Dialog / Lightbox / Popup

• react-aria-modal - Eine voll zugängliche und flexible React modal gebaut nach WAI-ARIA Authoring Practices.
• react-modal - Zugängliche Modaldialogkomponente für React.
• @paratco/async-modal - Einfacher async Modal Handler für React.
• reoverlay - demo - Die fehlende Lösung für die Verwaltung von Modals.
• sweetalert2 - demo/docs - Eine schöne, reaktionsschnelle, hochgradig anpassbare und zugänglicheWAI-ARIAErsatz für JavaScriptPopup-Boxen. Null Abhängigkeiten.
• sweetalert2-react-content - Official SweetAlert2 Enhancer bietet Unterstützung für React Elemente als Inhalt

Anmeldung

Toaster / Snackbar - Benachrichtigen Sie den Benutzer mit einem modelosen temporären kleinen Popup

• react-notifications-component - demo - Sehr anpassbare und benutzerfreundliche Komponente für Benachrichtigungen.
• notistack - demo - docs - Sehr anpassbare Benachrichtigungs-Snackbars (Toasts), die übereinander gestapelt werden können
• react-local-toast - demo - docs - Feedback zeigen, das mit einer bestimmten Komponente verknüpft ist, anstatt app-weite Toasts.
• react-toast - demo - docs - Minimale Toast-Benachrichtigungen.
• 🚀 react-toastify - demo - Beste Wette da draußen im Moment. Hakenunterstützung. Keine Refs.
• react-confirm-lite - demo - ist ein leichter, versprechensbasierter Bestätigungsdialog für React mit eingebautem Tailwind CSS Unterstützung. Es ist so konzipiert, dass es so einfach zu bedienen ist wie react-toastify, während es vollständig anpassbar bleibt.
• reapop - A React & Redux Meldesystem.
• react-hot-toast - demo - Heiße Rauchmeldungen für ReactLeichtgewichtig, anpassbar und standardmäßig schön.
• Sonner - Eine Meinung Toast-Komponente für React.

Tooltip

• react-tooltip - React Tooltip-Komponente.

Menü

Menus / Sidebars

• hamburger-react - demo/docs - Animierte Hamburger Menü-Icons für React.
• react-burger-menu - Eine Off-Canvas Sidebar mit Effekten und Stilen.
• react-offcanvas - Off-Canvas Menüs für React.
• react-planet - demo - Erstellen Sie kreisförmige Menüs, die wie Planeten aussehen.
• mantine-contextmenu - demo/docs - Kontext-Menühaken/Komponente für Anwendungen, die mit Mantine gebaut wurden UI.

klebrig

Fixed Header / Scroll-up Header / Sticky Elemente

• react-headroom - Verstecke deinen Header, bis du ihn brauchst.
• react-stickynode - Performant und umfassend React klebrig.

Tabs

• react-tabs - React Tabs-Komponente.
• react-tabtab - React, Tabs.

Beladung

Loader / Spinner / Fortschrittsbalken - Lassen Sie den Benutzer wissen, dass etwas geladen wird

• react-loader-spinner - Sammelsatz von react-Spinner für async Betrieb.
• react-redux-loading-bar - Einfache Ladeleiste für Redux und React.
• react-spinners-css - Erstaunliche Sammlung von react Spinnerkomponenten.
• react-spinners - Eine Sammlung von ladenden Spinnerkomponenten für react.
• react-content-loader - SVG-Powered-Komponente zum einfachen Erstellen von Platzhalter-Laden (wie das Laden von Facebook-Karten).

Captcha

• react-simple-captcha - npm - demo - React Simple Captcha ist ein sehr leistungsfähiges, hochgradig anpassbares und einfach zu bedienendes Captcha für React JS.
• procaptcha - demo - docs - Datenschutz fokussiert kostenlos CAPTCHA

Karussell

• @egjs/react-flicking - npm - demo - Es ist zuverlässig, flexibel und erweiterbar Karussell.
• react-awesome-slider - demo - Vollseite, 3D-animiert, 60fps Medien- und Inhalts-Slider / Karussell.
• pure-react-carousel - Gebaut von Grund auf neu und nicht sehr eigensinnig.
• react-id-swiper - Eine Bibliothek, um idangerous Swiper als ReactJs Komponente
• react-instagram-zoom-slider - demo - Eine Slider-Komponente mit Pinch-to-Zoom-Funktionen, die von Instagram inspiriert wurde.
• react-responsive-carousel - React.js Responsive Carousel (mit Swipe).
• react-slick - React Karussellkomponente.
• keen-slider - demo - Performant Karussell / Slider mit native Berührungs-/Wischverhalten.
• swiper - demo - docs - Der modernste kostenlose mobile Touch-Slider mit Hardware beschleunigten Übergängen und erstaunlich native Verhalten.

Knöpfe

• react-awesome-button - demo - 3D animierte 60fps Tasten mit Ladefortschritt und Social Share Aktionen.
• reactive-button - demo - docs - Eine schöne animierte Button-Komponente mit Fortschrittsanzeige.

Kollaps

• react-accessible-accordion - Accessible Accordion-Komponente für React.
• react-collapse - Component-Wrapper für die Crash-Animation mit react-Motion.
• react-tabbordion - demo - Universal, semantisch und CSS-nur Komponenten zum Erstellen von Accordions und Tabs.

Karte

Anzeigedaten in Diagrammen / Graphen / Diagrammen

• essential js 2 charts - Schöne und interaktive Charts & Graphen für react.
• EazyChart - demo - docs - Einfach Daten in aussagekräftige Charts umwandeln
• echarts for react - Wrapper um schöne Apache Echarts
• jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
• react-chartist - React Komponente für Chartist.js.
• react-charty - demo - Kleine, aber leistungsstarke interaktive Daten mit mehreren Diagrammtypen, Animationen, Zoomen, Thematisierung.
• react-chartjs-2 - Allgemein react Diagrammkomponenten mit Chart.js 2.0.
• react-d3-components - D3 Komponenten für React.
• react-google-charts - React-google-charts React Bauteil.
• react-highcharts - React-Highcharts.
• react-sparklines - Schöne und ausdrucksstarke Sparklines React Bauteil.
• react-timeseries-charts - Deklarative Zeitreihendiagramme.
• react-vis - Datenvisualisierungsbibliothek basierend auf React und d3.
• recharts - Eine neu definierte Chart-Bibliothek, die mit React und D3.
• rumble-charts - React Komponenten für den Aufbau zusammensetzbarer und flexibler Karten.
• victory - Daten für React.
• semiotic - Semiotic ist ein Data Visualisierung Framework für React.
• SVAR React Gantt - demo - docs Anpassbare, interaktive Gantt-Diagrammkomponente
• DevExtreme React Chart - Hochleistungs-Plugin-basierte Charts für Bootstrap und Material Design.
• Smart React Chart - Komplette Charting-Bibliothek.
• react-muze - React Umschlag für muze(kostenlose Datenvisualisierungsbibliothek zum Erstellen explorativer Datenvisualisierungen im Browser mithilfe von WebAssembly)
• Flowchart React - Flowchart & Flowchart Designer für React.js.
• react-dashboard - Isomorphe Dashboards.

Kommandopalette

• cmdk - Schnelles, komponierbares, unstilisiertes Kommandomenü für React.
• kbar - demo - Schnelles, tragbares und erweiterbares cmd+k Interface.

Baum

Anzeigen einer Baumdatenstruktur

• json-edit-react - demo - Hochkonfigurierbarer JSON/Object Tree Viewer und Editor
• react-arborist - demo - Eine voll ausgestattete Baumansicht: kopflos, virtualisiert, multiselektierbar, Drag-n-Drop, Tastaturnavigation, Suche
• react-complex-tree - demo - docs Unbeeindruckte barrierefreie Baumkomponente mit Multi-Select, Drag-and-Drop und Suche
• he-tree-react - demo - docs Baum, anpassbar UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualisiert.

UI Navigation

Wege zum Navigieren von Ansichten

• react-scroll - React Scroll-Komponente.
• react-swipeable-views - A React Komponente für gebundene Tabs und Swipeable Views.

Custom Scrollbar

• rc-scrollbars - demo Anpassbare Scrollbars mit Flex-Optionen und 60FPS
• react-custom-scroll - demo - Passen Sie einfach die Browser-Scrollleiste mit native OS Scroll Verhalten.
• react-shadow-scroll - Eine Komponente, die das Bild anpasst und Schatten einfügt, wenn gescrollt wird.

Audio/Video

• react-dailymotion - Dailymotion Player-Komponente für React.
• react-player - A react Eine Komponente zum Abspielen einer Vielzahl von URLs, einschließlich YouTube.
• react-soundplayer - Erstellen Sie benutzerdefinierte SoundCloud-Player mit React.
• react-youtube - React.js powered YouTube Player-Komponente.
• video-react - Ein Web-Video-Player für die HTML5-Welt mit React Bibliothek.
• material-ui-audio-player - Audio Player für material ui design.
• react-vision-camera - Kamerakomponente für React mit getUserMedia. Wir können diese Komponente für Computer Vision-Aufgaben wie Barcode-Scannen, Texterkennung usw. verwenden.
• react-barcode-qrcode-scanner - Barcode und QR code Scannerkomponente für ReactEs verwendet react-vision-Kamera zum Zugriff auf die Kamera und Dynamsoft Barcode Reader zum Lesen von Barcodes.

Karte

• google-map-react - Universal Google Map react Komponente, ermöglicht Render react Komponenten auf der Google Map.
• mapkit - Eine Bibliothek zur Integration von Apple Maps mit MapKit JS mit Anmerkungen, Overlays und Suche.
• pigeon-maps - demo - ReactJS Karten ohne externe Abhängigkeiten.
• react-geosuggest - A React autosuggest für die Google Maps Places API.
• react-leaflet - React Komponenten für Flugblattkarten.
• react-map-gl - A React Wrapper für MapboxGL-js und Overlay API.
• react-svg-map - demo - Eine Reihe von Komponenten, um eine interaktive SVG-Karte anzuzeigen.

Uhrzeit / Datum / Alter

Anzeigezeit / Datum / Alter

• react-timeago - Eine einfache Time-Age-Komponente für ReactJs.
• timeago-react - Format Datum mit *** time ago Erklärung. Zum Beispiel: “Vor 3 Stunden”.
• react-google-flight-datepicker - Google Flight Date Picker implementiert in ReactJS.

Foto / Bild

Bilder/Fotos

• lightGallery - demo - docs - Voll funktionsfähige Lightbox-Galeriekomponente.
• react-compare-image - demo - React Komponente, um zwei Bilder mit einem Slider zu vergleichen.
• react-image-gallery - Responsive Bildergalerie, Karussell, Bildschieber react Bauteil.
• yet-another-react-lightbox - demo - docs - React Lightbox-Komponente.
• react-intense - A React Bauteil zum Betrachten großer Bilder aus nächster Nähe.
• react-photo-album - demo - docs - Responsive React Fotogalerie.
• react-svg-pan-zoom - A React Komponente, die schwenk- und zoomfunktionen zu svg hinzufügt.
• react-particle-image - demo Rendern Sie Bilder als interaktive Partikel.
• react-imgix - Fügen Sie schnelle, responsive Bilder als Bild, Bild oder Hintergrund hinzu!
• @frameright/react-image-display-control - Definieren Sie Zoomregionen für intelligente responsive Bilder.
• zoom-image - demo - docs - Eine kleine, aber leistungsstarke Framework-Agnostik-Bibliothek, um das Bild im Web zu zoomen
• react-infinite-gallery – Infinite-scroll image gallery component for React apps.

Icons

Icons/Icon Set/Emojis

• iconify-react - Über 40k Icons aus 50+ Icon-Sets, einschließlich aller beliebten Icons und Emoji-Sets.
• react-icons - Svg react Icons von beliebten Icon-Packs mit ES6-Importen.
• react-open-doodles - Tolle kostenlose Illustrationen als react Bauteile.
• react-icomoon - mit react-icomoon Sie können ganz einfach die Symbole verwenden, die Sie in icomoon ausgewählt oder erstellt haben.
• tabler-icons-react - Ein Set von über 450 kostenlosen MIT-lizenzierten hochwertigen SVG-Icons.
• Lucide - Schönes & konsistentes Icon-Toolkit, das von der Community erstellt wurde. Open-Source-Projekt und eine Abzweigung von Feather Icons.

Paginator

Display ein Steuerelement zu paginieren

• react-paginate - A ReactJS Eine Komponente, die eine Paginierung erzeugt.
• react-laravel-paginex - Laravel Pagination mit ReactJS (anpassbar).
• paginated - React Render Requisiten & benutzerdefinierten Haken, um Paginierung zu bauen.
• react-steps - Demo - Responsive React Stepper.

Markdown Betrachter

Display analysierte Markdowquelle

• react-markdown - Render Markdown als React Bauteile.

Leinwand

Sketch-Eingabe mit Canvas oder SVG

• react-konva - React Konva ist eine JavaScript Bibliothek zum Zeichnen komplexer Canvas-Grafiken mit Bindungen an das Konva Framework.
• react-sketch - Ein Sketch-Tool für React basierende Anwendungen, gesichert durch FabricJS
• react-sketch-canvas - Demo Freihand-Vektorziehwerkzeug für React Verwendung von SVG als Canvas. Akzeptiert Eingaben von Maus, Touch und Grafiktabletts
• react-heat-map - Eine leichte Kalender-Heatmap react auf SVG aufgebaute Komponente, anpassbare Version von GitHubBeitragsgraph.

Bildschirmfoto

• html2canvas - Machen Sie Screenshots von jedem Teil Ihrer Webseite mit Javascript.

Verschiedenes

• puck - demo - Der selbst gehostete Visual Editor für React
• react-advanced-news-ticker - demo - Eine flexible und animierte vertikale Nachrichten-Ticker-Komponente
• react-avatar-generator - Ermöglicht es Benutzern, zufällige Kaleidoskope zu erstellen, die als Avatare verwendet werden können.
• react-awesome-query-builder - demo Visual Query Builder aus Formularfeldern, mit SQL, MongoDB und JSON Export
• react-blur - React Komponente für unscharfe Hintergründe.
• react-demo-tab - demo - A React Eine Komponente, um Demos anderer Komponenten einfach zu erstellen.
• fastcomments-react - demo - FastComments-Komponente zum Einbetten eines Live-Kommentar-Threads auf einer Seite oder SPA.
• react-pdf-viewer - docs - A React Komponente zum Betrachten eines PDF Dokument.
• react-simple-chatbot - demo Eine einfache chatbot-komponente zum erstellen von konversationschats.
• react-file-reader-input - Dateieingabekomponente zur Steuerung für das Styling und Abstraktion von Dateilesen.
• react-filter-control - Die React Filterbuilder-Komponente zum Aufbau der Filterkriterien im UI.
• react-headings - Auto-Increment Ihre HTML Überschriften (h1, h2, etc.) für verbesserte Zugänglichkeit und SEO, unabhängig von Ihrer Komponentenstruktur, während Sie die volle Kontrolle darüber behalten, was gerendert wird.
• react-joyride - Erstellen Sie Walkthroughs und geführte Touren für Ihre ReactJS Apps. Jetzt mit Standalone-Tooltips!
• react-mouse-select - Demo Eine Komponente, die die Auswahl ermöglicht DOM Elemente durch Bewegen der Maus
• react-resizable-and-movable - Größere und bewegliche Komponente für React.
• react-resizable-box - Resifizierbares Bauteil für React. #reactjs.
• react-searchbox-awesome - demo Minimalistische Suchbox.
• react-split-pane - React Split-Pane-Komponente.
• react-swipe-to-delete-ios - demo So löschen Sie ein Element in einer Liste auf die gleiche Weise wie iOS.
• react-swipeable-list - demo - Konfigurierbare Komponente zum Rendern einer Liste mit wischbaren Elementen.
• typography - Ein leistungsstarkes Toolkit zum Erstellen von Websites mit schöner Typografie.
• react-pulse-text - demo/docs - Ermöglicht Ihnen, den Text einer beliebigen Eigenschaft einer anderen Komponente zu animieren.
• captcha-image - Ermöglicht es Ihnen, ein zufälliges Captcha-Bild mit Optionen zu generieren.
• react-pdf - PDFs in Ihrem React App so einfach, als ob sie bilder wären.
• react-customizable-chat-bot - Demo Erstellen Sie Ihren eigenen Chatbot, der Ihren Markenanforderungen in wenigen Minuten entspricht.
• @restpace/schema-form - Demo Erstellen Sie einfach komplexe Formulare automatisch aus einem JSON Schema.
• react-darkreader - A React Hook zum Hinzufügen eines Dark / Night-Modus zu Ihrer Website inspiriert von Darkreader.
• react-apple-signin-auth - Apple signin für React mit dem offiziellen Apple JS SDK.
• react-mrz-scanner - A React Komponente zum Scannen von MRZ auf Pässen, Visakarten usw. Es basiert auf Dynamsoft Label Recognizer.

Formteile

Lassen Sie den Benutzer Daten eingeben

Datum / Zeitmesser

Datumspflücker/Zeitpflücker/Datumspflücker/Datumsbereichspflücker

• date-range-picker - demo - Eine Kalenderkomponente, die Datums-, Range- & Range-Picks unterstützt.
• react-big-calendar - Gcal/Outlook wie Kalenderkomponente.
• react-datepicker - Eine einfache und wiederverwendbare datepicker-komponente für. React.
• react-day-picker - Flexibler Date Picker für React.
• react-flatpickr - Flatpickr für React.
• react-simple-timefield - demo - Einfaches Zeiteingabefeld.
• react-timezone-select - demo - Dynamische, prägnante Zeitzonenauswahl. Basierend auf react-select.
• DevExtreme React Scheduler - Hochleistungs-Plugin-basierter Zeitplan/Kalender für Material Design.
• jQWidgets Scheduler - Komplette Planungsbibliothek.
• react-calendar - Der ultimative Kalender für Ihre React App.
• react-date-picker - Ein Date Picker für Ihre React App.
• schedule-x - Material design Komponenten für Ereigniskalender und Datumsauswahl. Demoseite: https://schedule-x.dev/

Emoji-Pflücker

• interweave-emoji-picker - A React Der Emoji-Picker basiert auf Interweave und Emojibase.

Inputarten

Maskierte Eingaben, spezialisierte Eingaben; E-Mail / Telefonnummer / Kreditkarte / etc.

• react-credit-cards - Schöne Kreditkarten für Ihre Zahlungsformulare.
• react-payment-inputs - demo - Ein Null-Abhängigkeits-Container, der bei Zahlungskarteneingabefeldern hilft.
• react-input-mask - demo - Noch eine weitere react Bauteil zur Eingabemaskierung.
• @lunasec/react-sdk - docs Sichere, gehärtete Formularkomponenten, die alle Daten automatisch verschlüsseln/tokenisieren.
• react-numpad - demo - Erweiterbare Nummer Pad Steuerung für Zahlen, Daten und Zeiten.
• react-multi-email - demo Formatieren Sie mehrere E-Mails als Benutzertypen.

Autovervollständigung

Autosuggest / autocomplete / typeahead

• react-autosuggest - WAI-ARIA konform React Autosuggest-Komponente.
• react-typeahead - Rein reactTypahead und Typahead-Tokenizer.

Wählen

• react-aria-menubutton - Ein vollständig zugängliches, leicht thematisierbares, React-powered Menü-Button.
• react-functional-select - demo - Micro-sized & mikro-optimierte Komponente für React.js.
• react-mobile-picker - demo - Eine iOS-ähnliche Select-Box-Komponente.
• react-select - Eine Auswahlsteuerung, die mit und für React JS.
• react-column-select - Eine Spaltenauswahlkomponente, die für react.
• react-select-search - demo - Eine leichte ausgewählte Komponente für React

Farbwähler

• coloreact - Ein kleiner Color Picker für React.
• react-color - Ist eine winzige Color Picker Widget-Komponente für React Apps.
• react-colorful - Eine winzige (2,5 KB), abhängigkeitsfreie, schnelle und zugängliche Farbauswahlkomponente.
• react-input-color - React Eingangsfarbkomponente mit hsv Farbwähler.

Umschalter

• @anatoliygatt/heart-switch - demo - Eine vollständig thematisierbare und zugängliche herzförmige Kippschalterkomponente.
• react-ios-switch - React Schalterkomponente.
• react-toggle - Eine elegante, zugängliche Kippkomponente für ReactAuch eine verherrlichte Checkbox.
• ui-switch - Die vollständigste Toggle -Komponente

Schieber

• react-slider - Schieberbauteil für React.

Funktaste

• react-radio-group - Bessere Radio-Buttons.

Typ ausgewählt

Lassen Sie den Benutzer etwas auswählen (z. B. ein Tag), während Sie eingeben

• react-autocomplete-input - Autocomplete Eingabefeld für React.
• react-mentions - Erwähnen Sie Personen in einem Textbereich.
• rich-textarea - Eine Textfläche zum Einfärben, Hervorheben, Dekorieren von Texten und Autovervollständigen.

Tag-Input

Lassen Sie den Benutzer mehrere Tags in einer einzigen Eingabe hinzufügen

• react-tag-input - Eine fantastisch einfache Tagging-Komponente für Ihre React Projekte.
• react-tagsinput - Eine einfache react Komponente zur Eingabe von Tags.
• react-tokeninput - Tokeninput-Komponente für React.
• tagify - demo & docs - Leichtgewichtige, effiziente Tags Eingabekomponente.

Automatisierte Eingabe / Textarea

• react-input-autosize - Autoresizing-Eingabefeld für React.
• react-autowidth-input - Hoch konfigurierbares und erweiterbares automatisch bemessenes Eingabefeld, das mit Haken aufgebaut ist.
• react-textarea-autosize - <textarea />Komponente für React die mit dem Inhalt wächst.

Star Rating

• react-rating - demo - Null-Abhängigkeit, hochgradig anpassbare Bewertungskomponente.
• react-awesome-stars-rating - demo - Die Sternbewertungskomponente mit Zugänglichkeit.
• react-star-rating-input - React.js Komponente für den Eintritt in 0-5 (oder mehr) Sterne.

Drag und Drop

• react-beautiful-dnd - Schön und zugänglich Drag & Drop für Listen mit React
• react-dnd - Drag & Drop für React.
• react-drag-sizing - “Drag to resize” (Größe ändern) als React Komponente.
• react-draggable - React schleppbares Bauteil.
• react-dragula - Drag and drop so einfach, dass es weh tut.
• react-dropzone - Einfache HTML5 Drag-Drop-Zone mit React.js.
• react-movable - Zugängliche und minimalistische Bibliothek (<4kB gzipped) für vertikales Drag & Drop in Listen und Tabellen.
• react-sortable-pane - Sortierbare und rezisierbare Scheibenkomponente für React.
• neodrag - Multi-Framework-Bibliotheken zum Ziehen. Wählen Sie Ihr Framework, das ziehende API-Verhalten bleibt gleich.

Sortierbare Liste

Lassen Sie den Benutzer eine Reihenfolge auf einer Liste definieren

• react-anything-sortable - Sortieren Sie Kinder mit Touch-Unterstützung und IE8-Kompatibilität.
• sortablejs - Listen, die per Drag-and-Drop innerhalb und zwischen Listen neu geordnet werden können.

Rich Text Editor

• alloyeditor - WYSIWYG Editor basierend auf CKEditor mit komplett neu geschrieben UI.
• ckeditor4-react - Ein offizieller CKEditor 4 Rich Text Editor Wrapper.
• ckeditor5-react - Ein offizieller CKEditor 5 Rich Text Editor Wrapper.
• draft-js - A React Framework zum Erstellen von Texteditoren.
• edtr-io - demo - docs - WYSIWYG Inline Web Editor mit Plugins.
• megadraft - Rich Text Editor basiert auf draft.js.
• react-ace - Ass (fortgeschritten) Code Editor) Wraper.
• react-codemirror - demo - CodeMirror-Komponente für React.
• react-contenteditable - React Komponente für eine div mit editierbaren Inhalten.
• react-draft-wysiwyg - WYSIWYG Editor auf der Oberseite von DraftJS.
• react-editor - Einfacher Richtext-Editor, der Bilder einfügen und HTML.
• react-medium-editor - Medium-Editor Wrapper.
• react-monacoeditor - Monaco Editor Komponente für React.
• react-simple-code-editor - Einfache No-Frills code Editor mit Syntax Highlighting
• react-quill - Quill Wrapper.
• react-trumbowyg - Trumbowyg Wrapper.
• remirror - demo - docs ProseMirror Toolkit für React.
• slate - demo - docs - Ein vollständig anpassbares Framework zum Erstellen von Rich Text Editoren.
• smartblock - demo - docs Blockbasierter WYSIWYG-Editor basierend auf ProseMirror.
• tiptap - demo - docs - Das Headless Editor Framework für Webartisans.

Markdown Herausgeber

• react-simplemde-editor - React Bauteilhülle für EasyMDE (the most fresh SimpleMDE fork).
• react-markdown-editor - A markdown Editor mit React/Reflux.
• react-md-editor - Eine einfache markdown Editor mit Vorschau, implementiert mit React.js und TypeScript.

Bildbearbeitung

Bildmanipulation

• react-avatar-editor - Facebook-ähnliche, Avatar / Profilbildkomponente.
• react-avatar-generator - Generieren sie lustiges kaleidoskop für benutzer-avatare.
• react-easy-crop - Komponente zum Zuschneiden / Drehen von Bildern / Videos mit einfachen Interaktionen. Touch freundlich.
• react-image-crop - Ein Responsive Image Crawling Tool für React.
• react-image-cropper - Bild beschneiden.
• react-advanced-cropper - A react cropper Bibliothek, um den cropper genau für Ihre Website zu erstellen design.
• react-mobile-cropper - Eine gebrauchsfertige Bildzuschnittbibliothek, die von beliebten Android-Croppern sehr inspiriert wird. Basierend auf react-advanced-cropper.

Form Component Collections

• formsy-material-ui - Ein Formsy Kompatibilität Wrapper für Material UI Bauteile bilden.
• formsy-react-components - Eine Reihe von React JS-Komponenten zur Verwendung in einem formy-react Form.
• react-input-enhancements - Reihe von Verbesserungen für die Eingabesteuerung.
• react-widgets - Ein à la carte Set von polierten, erweiterbaren und zugänglichen Inputs.

Verschiedenes

• @anatoliygatt/numeric-stepper - demo - Eine vollständig thematisierbare und zugängliche numerische Schrittkomponente.
• interweave - React Bibliothek zum sicheren Rendern HTML, filterattribute, autowrap-text mit matchern, rendern emoji-zeichen und vieles mehr.
• react-designer - Einfach zu konfigurierende, leichte, editierbare Vektorgrafiken in Ihrem react Bauteile.
• react-upload-gallery - React für Upload Image Gallery. Drag & Drop, Sortable, Customize.

Syntax Highlight

• react-syntax-highlighter - Syntax Hervorhebung Komponente mit Prismjs oder Highlightjs AST mit Inline-Styles.

UI Layout

Back to top ⬆️

Komponenten zum Layout der Benutzeroberfläche der App

• autoresponsive-react - Auto Responsive Grid Layout Library.
• hedron - Ein schnörkelloses Flexbox-Grid-System, das von gestylten Komponenten angetrieben wird.
• m-react-splitters - Splitter-Komponente, geschrieben in TypeScript.
• muuri-react - demo - docs Responsive, sortierbare, filterbare und Draggable Grid Layouts.
• react-grid-layout - Ein Draggable und Resizable Grid Layout mit Responsive Breakpoints, für React.
• react-layman - demo - Dynamischer Tiling Layout Manager mit Tabs
• react-masonry-component - Wrapper für @desandro’s Masonry.
• react-reflex - Flex Layout Container-Komponente für fortschrittliche React Web-Anwendungen.
• react-spaces - demo/docs - Nestable verankerte, resizable, scrollbare Komponenten.
• react-stonecutter - Animierte Rasterlayout-Komponente.
• react-colrow - Responsive Rasterlayout-Komponenten. Basierend auf css Flexbox. Support Fraktion Breite, Auto wachsen.
• react-schematic - demo Erstellen Sie responsive Layouts mit stilisierten Schaltplänen ohne Overhead einer Theme-Konfiguration

UI Animation

Back to top ⬆️

Animate Transitions

• data-driven-motion - Animieren Sie Ihre Daten ganz einfach.
• react-animatable - Eine Animationsbibliothek mit Web Animations API.
• react-anime - Eine super einfache Animationsbibliothek.
• react-flip-move - Mühelose Animation zwischen DOM Änderungen (z. B. Listenneuordnung) mithilfe der FLIP-Technik.
• react-gsap-enhancer - Nutzen Sie die volle Power von React und GSAP zusammen.
• react-tsparticles - Eine leichte Komponente zum einfachen Erstellen interaktiver Partikelanimationen
• react-motion - Eine Feder, die Ihre Animationsprobleme löst.
• react-mt-svg-lines - Wrapper, um den Strich in SVGs zu animieren.
• react-router-transition - Übergänge gebaut für reactRouter, powered by react-Motion.
• react-spring - Eine Frühlingsphysik basierte Animationsbibliothek.
• react-ts-typewriter - demo - Einfach zu bedienender und anpassbarer Schreibmaschineneffekt für jeden Text.
• framer-motion - Eine Animations- und Gestenbibliothek.
• react-spark-scroll - Scroll-basierte Aktionen und Animationen für react.
• react-track - Verfolgen Sie die Position des DOM Elemente. Erstellen Sie coole Animationen.
• react-transitive-number - Wenden Sie Übergangseffekt auf numerische Strings an, a la alte Groupon-Timer.
• react-web-animation - React Komponenten für die Web Animations API -.
• auto-size-transition - Eine Komponente, die dynamisch entsprechend der internen Kindergröße skaliert wird
• react-particles-bg - Hintergrund der Partikel.
• gooey-react - demo/docs - Der klebrige Effekt für React, verwendet für Shape Blobbing / Metaballs.
• react-voodoo - demo/samples - Additive Animation Engine ermöglicht komplexe Android / iOS-ähnliche Animationen, Rendern von SSR, prädiktive Trägheit, Multitouch, etc.

Parallaxen

• simple-parallax-js - demo - Der einfachste Weg, um einen Parallaxeneffekt mit React und JavaScript auf Bildern
• react-parallax-tilt - demo - Tragen Sie einfach den Parallax Tilt Hover-Effekt auf Komponenten auf.

UI Rahmen

Back to top ⬆️

Reaktionsweise

Set von Komponenten + Responsive Layout System

• ant-design - demo/docs - A UI Design Sprache aus China. Einzelperson components verfügbar.
• atlaskit - Atlassians Beamter UI Bibliothek, mit Komponenten von badge bis tree table .
• base web - Base Web ist eine Grundlage für die Initiierung, Weiterentwicklung und Vereinheitlichung von Webprodukten.
• carbon - demo/docs - A design Das System wurde von IBM gebaut.
• cdbreact - demo - docs - Elegant UI Kit-Bibliothek und wiederverwendbare Komponenten zum Erstellen von mobilen, responsiven Websites und Web-Apps.
• chakra-ui - demo/docs Einfach, modular und zugänglich UI Komponenten für Ihre React Anwendungen.
• ChatUI - demo/docs - Die UI design Sprache und React Bibliothek für Conversational UI
• CoreUI for React - demo/docs - Open Source UI Komponentenbibliothek.
• evergreen - demo/docs Evergreen React UI Framework nach Segment.
• fluentui - UX Frameworks zum Erstellen schöner, plattformübergreifender Apps, die code, designund Interaktionsverhalten.
• gestalt - demo/docs - Eine Reihe von Komponenten, die Pinterest unterstützt design Sprache.
• grommet - Das fortschrittlichste UX-Framework für Unternehmensanwendungen.
• kokonut-ui - Free Modern und anpassbar UI Bauteile.
• Mantine - demo/docs - Eine voll ausgestattete Bibliothek mit 100+ Hooks und Komponenten mit native Dark Theme Unterstützung
• orbit - Komponenten für den Bau reiseorientierter Projekte.
• flowbite-react - Open Source UI Komponentenbibliothek basierend auf React, Tailwind CSSund Flowbite.
• primereact - A vollständig UI Framework mit 50+ Komponenten mit material, bootstrap und Custom Themes.
• radix-ui - Ungestylte, zugängliche Komponenten für das Bauen von hoher Qualität design Systeme und Web-Apps.
• react-bootstrap - Bootstrap Komponenten, die mit React.
• react-foundation - Stiftung als React Bauteile.
• reakit - demo/docs Toolkit zum Erstellen zugänglicher Rich Web Apps
• searchkit - React UI Komponenten / Widgets. Der einfachste Weg, eine großartige Sucherfahrung mit Elasticsearch zu erstellen.
• semantic-ui-react - Die offizielle Semantik-UI-React Integration.
• semi-design - demo/docs - Eine moderne, umfassende, flexible design System.
• shadcn/ui - demo - docs - Schön gestaltete Komponenten, die Sie kopieren und in Ihre Apps einfügen können.
• shineout - demo - Chinesisch-freundliches Set von Komponenten: Formularelemente, Navigation, Tisch, Baum, Baumauswahl Dropdown usw.
• Tremor - demo - docs Open-Source-Komponenten zum Erstellen von Diagrammen und Dashboards.
• untitled-ui-react - demo - Wunderschön gestaltete Sammlung von Komponenten, die mit React Aria und Tailwind CSS.

Material Design

• 🚀 Material UI - Vollständige Suite von Komponenten. Bauen Sie Ihre eigenen design System, oder beginnen mit Material Design.
  • Autocomplete - Zugängliche Autovervollständigung, Combobox, Multiselect
  • Material Icons - 1000+ SVG material Icons.
  • Modal - Zugängliche modale Dialogkomponente.
  • Slider - Zugängliche Schieberkomponente.
  • Table - Tisch mit Sortieren, Auswählen, Paginieren, virtualisiert.
  • Tree View - Zugängliche Baumansichtskomponente für React.
• react-essence - Essenz - Das Wesentliche Material Design Rahmen.
• react-materialize - Material design für reactPowered by materializecss.
• react-toolbox - Eine Reihe von React Komponenten, die Google implementieren Material Design.
• mdbootstrap - React Bootstrap mit Material Design

Mobil

• antd-mobile - Konfigurierbar mobil UI aus China.
• Ionic React - Ionic Framework: Einfach Android, Desktop und Progressive Web Apps mit einem code Base.
• OnsenUI - demo/docs Mobile App Framework mit Material und flache (iOS) Designs. Basierend auf Web Components.

Komponentensammlungen

• blueprint - demo - docs - UI Toolkit zum Erstellen komplexer, datendichter Web-Schnittstellen für Desktop-Anwendungen (nicht mobile).
• dataminr-react-components - Sammlung von Wiederverwendbaren React Komponenten und Versorgungsfunktionen.
• shards-react - docs/demo - Eine schöne und moderne React design System. Freemium.
• aframe-react - Erstellen Sie Virtual-Reality-Erfahrungen mit A-Frame und React.
• react-admin - Erstellen Sie Admin-Benutzererfahrungen auf Basis von REST- und GraphQL-Diensten.
• refine - demo - docs Erstellen Sie datenintensive Anwendungen in kürzester Zeit. Schiffe mit Ant Design System, auf Unternehmensebene UI Toolkit.
• matrix-card - demo - Einfachste mögliche Komponente, um Matrix-Regen-Style-Karten zu generieren.
• rsuite - demo/docs - Suite von Komponenten für “Unternehmenssystemprodukte”.
• lens-ui - docs - Ein Anzug von Komponenten, die sich auf Einfachheit konzentrieren.
• Tailwindadmin - docs - Eine Sammlung von Ready-made ShadCN UI Komponenten, die Sie direkt in Ihre React/Next.js Projekte.

UI Versorgungsunternehmen

Back to top ⬆️

Reporter

Report berechnete Stile

Sichtbarkeitsmelder

Bericht, wenn eine Komponente sichtbar/versteckt wird

• react-intersection-observer - React Implementierung der Intersection Observer API.
• react-visibility-sensor - Sensorkomponente.
• react-waypoint - A React Komponente zum Ausführen einer Funktion, wenn Sie zu einem Element scrollen.

Mess-Reporter

Bestimmen und berichten Sie Messungen eines Elements

• react-component-queries - Stellen Sie Ihren Komponenten Requisiten basierend auf ihrer Breite und / oder Höhe zur Verfügung.
• react-container-dimensions - Wrapper-Komponente, die Elementveränderungen erkennt.
• react-dimensions - React Komponente höherer Ordnung, um Dimensionen des Containers zu erhalten.
• react-height - Component-Wrapper zur Bestimmung und Meldung der Höhe der Kinderelemente.
• react-measure - Berechnungsmessungen eines React Bauteil.
• react-sizeme - Machen Sie Ihre React Komponenten, die sich ihrer Breite und Höhe bewusst sind.

Geräteeingang

Turn Benutzereingabe in Aktionen

Keyboard Events

• react-hotkeys - Deklaratives Hotkey- und Fokusbereichsmanagement für React.
• react-key-handler - React Eine Komponente zum Behandeln von Tastaturereignissen.
• react-keydown - Leichte Keydown-Wrapper für React Bauteile.
• react-shortcuts - Verwalten Sie Tastenkombinationen von einem Ort.
• useKeyCapture - Ein benutzerdefinierter Haken, um die Key-Press-Hörer eines Ziels / Global zu erleichtern.
• react-keyboard-navigator - Eine Suite von React Komponenten und Haken zum Auswählen von Geschwisterkomponenten durch die Tastatur.

Scroll-Events

• react-scroll-components - Eine Reihe von Komponenten, die react zum Page Scrolling.

Touch Swipe

• react-swipe - Swipe.js als React Bauteil.

Mouse Events

• react-hook-mighty-mouse - demo Haken, der Mausereignisse auf ausgewählten Elementen verfolgt.

Meta-Tags

Meta-Tags setzen,

• react-helmet-async - Gewindesicherer Helm für React 16+ und Freunde
• react-helmet - Ein Dokumentenleiter für React.

Portal

Rendern Sie ein Element bei einer beliebigen DOM Knotenpunkt

• react-layer-stack - Einfaches, aber ubiquitär leistungsfähiges und agnostisches Schichtsystem für React.
• react-portal - React Komponente für den Transport von Modals, Lightboxes, Load Bars … zu document.body.

Testbenutzerverhalten

A/B-Tests, Experimente, …

• react-experiments - React Komponenten zur Durchführung UI Experimente.

Code Design

Back to top ⬆️

Bibliotheken, die helfen code Design

Datenspeicher

Datenfluss / Datenmanagement / Datenspeicher / Komponenten Zustand / Datenfluss

• baobab-react - React Integration für Baobab.
• cerebral - Ein State Controller mit eigenem Debugger.
• effector-react - React Bindungen für Effector, einen effektiven Multi-Store-State Manager.
• fireproof - demo - docs Pure JS, Zero Dependency, CRDT Datenbank - läuft im Browser und verbindet sich mit jeder Cloud oder jedem Backend
• RxDB - demo - docs Eine schnelle, lokale erste, reaktive Datenbank für JavaScript Anträge
• fluxible - Ein steckbarer Behälter für universelle Flussmittelanwendungen.
• kea - High Level Architektur für React Apps.
• react-i13n - Ein performanter, skalierbarer und steckbarer Ansatz zur Instrumentierung Ihrer React Anwendung.
• react-redux - Beamter React Bindungen für Redux.
• redux-batched-actions - Reducer + Aktion zum Reduzieren von Aktionen unter einer einzigen Abonnentenbenachrichtigung.
• redux - Vorhersagbarer Zustandsbehälter für JavaScript Apps.
• reselect - Selector Library für Redux.
• resourcerer - Deklaratives Data-Fetching Framework für REST APIs
• synergies - docs Eine performante und verteilte Kontext-State-Bibliothek zum Erstellen von Wiederverwendbaren React Zustandslogik durch Synergisieren atomarer Kontextstücke.
• zustand - docs - Eine schnelle Bearbones State-Management-Lösung mit vereinfachten Flux-Prinzipien und boilerplate-freien Haken-Api.
• teaful - Winzig, leicht und kraftvoll React Staatliche Verwaltung

Form Logic

• data-driven-forms - Eine deklarative Art, Formen mit aller Funktionalität zu erstellen.
• formik - Bauen Sie Formen ohne Tränen und unterstützt Validierung in Leichtigkeit.
• formsy-react - Form Input Builder und Validator für React JS.
• Phormal - Docs & Demos Responsive, mehrsprachige Formulare mit eingebauter Validierung, Unterstützung für den dunklen Modus und Rechts-nach-Links-Sprachen.
• react-hook-form - React Hooks für die Formularvalidierung ohne den Aufwand.
• react-jsonschema-form - A React Eine Komponente zum Erstellen von Webformularen aus JSONSchema.
• react-client-validation - Einfache und superleichte Validierung für React.
• react-final-form - Subskriptionsbasierte Form State Management
• react-formawesome - Komplexe Bibliothek zum Erstellen fantastischer Formen.
• surveyjs - Die Advanced Survey and Form Bibliothek
• Formily - Hohe Leistung, erweiterbar und Typescript freundlich
• hook-form-react - docs - Eine leichte, abhängigkeitsfreie Lösung React Haken zur Formularvalidierung.

Router

• react-router-component - Deklarative Routerkomponente für React.
• react-router-scroll - React Router Scroll Management.
• react-router - Eine komplette Routing-Bibliothek für React.
• redux-first-history - Redux Erste Geschichte - Redux Historisch verbindliche Unterstützung react-router - @reach/router - wouter
• universal-router - Ein einfacher Middleware-Router für isomorphe JavaScript Web Apps.
• wouter - Eine minimalistisch freundliche ~1,3KB Routing-Bibliothek. Nichts anderes als Haken.
• tanstack-router - Typsicherer Router mit eingebautem Caching & URL Staatliche Verwaltung

Requisiten vom Server

Komponenteneigenschaften asynchron über das Netzwerk abgerufen

• react-refetch - Eine einfache, deklarative und zusammensetzbare Möglichkeit, Daten für React Bauteile.
• redux-connect - Bietet Dekorateur zum Auflösen von async Props in reactRouter.
• axios-react - HTTP Client-Komponente für React.

Kommunikation mit dem Server

• apollo-client - Ein einfacher Caching-Client für jeden GraphQL-Server und UI Rahmen.
• react-relay - Relais ist ein JavaScript Framework für die Erstellung datengesteuert React Anträge.
• query - docs Leistungsstarkes asynchrones Zustandsmanagement, Server-State-Dienstprogramme und Datenabruf für TS/JS, React, Solid, Svelte und Vue.

CSS / Stil

• aesthetic - Ein leistungsfähiger typsicherer, Framework-Agnostiker, CSS-in-JS-Bibliothek für das Styling von Komponenten, sei es einfache Objekte, das Importieren von Stylesheets oder einfach das Verweisen auf externe Klassennamen.
• aphrodite - It’s Inline-Stile, aber sie funktionieren!.
• inline-style-prefixer - Laufzeit Autoprefixer für Inline Style Objects.
• @classmatejs/react - Ein auf Klassennamen fokussierter Komponentenbauer mit einer Syntax wie gestylte Komponenten und dem Zucker der Varianten von cva.
• react-container-query - Modulare Responsive-Komponente.
• react-responsive - Medienanfragen in react für responsive design.
• reactponsive - Responsive Komponenten und Haken.
• styled-components - Visuelle Primitive für die Komponente Alter.
• stitches - CSS-in-JS mit fast Null Laufzeit, SSR, multivarianter Unterstützung.

HTML Meldebogen

• jsx-control-statements - Neater Wenn und For For React JSX.

Isomorphe Apps

• hypernova - Ein Service für serverseitiges Rendern Ihrer JavaScript Ansichten.
• isomorphic-style-loader - Isomorph CSS Style Loader für Webpack.
• react-server - React Framework mit Server-Render zum schnellen Seitenladen.
• rill - Universal Web Application Framework.
• webpack-isomorphic-tools - Serverseitiges Rendering für Ihre Webpack-Anwendungen (z.B.) React).

Boilerplate

Gerüst / Starterkit / Yeoman-Generator / Stack-Ensemble / Seed

• create-react-app - Schaffen React Apps ohne Build-Konfiguration.
• crisp-react - Express Integration in TypeScript mit Unterstützung für mehrere SPAs und Fallstrickvermeidung.
• cra-template-redux-auth-starter - A Redux Auth Starter Boilerplate für CRA.
• electron-react-boilerplate - Live-Editing-Entwicklung auf Desktop-App.
• elegant - docs - demo - Eine einfache React Framework zum schnellen Aufbau schöner und ausdrucksstarker Web-Anwendungen mit Next.js, Tailwind CSS, und Markdown Beladung.
• extensive-react-boilerplate - Boilerplate mit Next.js, Auth (Anmelden, Anmelden, Passwort zurücksetzen, E-Mail bestätigen, Token aktualisieren), Material UI, React Hakenform I18N, Datei-Uploads (unterstützt lokale und Amazon S3-Treiber), Tests, CI.
• generator-starhackit - Full-Stack Starter Kit.
• nwb - CLI Tool und devDependency für React apps & Komponenten und npm Module.
• nx - Build System der nächsten Generation mit erstklassiger Monorepo-Unterstützung und leistungsstarken Integrationen.
• PBandJ - Zero-Config Reusable Component Framework.
• react-hot-boilerplate - Minimale Live-Bearbeitung Boilerplate für Ihre nächste ReactJS Projekt.
• rockpack - Einfache Lösung zum Erstellen React Anwendung mit SSR, Bündelung, Auskleidung, Prüfung innerhalb von 5 Minuten.
• create-react-dependency - Schaffen react Abhängigkeiten ohne Build-Konfiguration.
• phoenix - Eine einfache Boilerplate, die Ihnen hilft, Ihre react Anwendung mit Server Side Rendering & Localization Unterstützung.
• react-enterprise-starter-kit - Sehr skalierbar und performant Awesome React Starter Kit für eine Unternehmensanwendung mit einer sehr einfach zu wartenden Codebasis.
• Tailwindadmin - Free Shadcn Dashboard Template auf React und Tailwind CSS Mehrfache Framework-Unterstützung

Verschiedenes

• react-inlinesvg - Eine SVG-Ladekomponente für ReactJS.
• react-godfather - Eine neue Art, funktionale Komponenten zu schreiben, ohne Haken.
• react-vvm - Ein neuer Ansatz für MVVM in React, um eine saubere Trennung von Bedenken zu erzwingen, die Boilerplate zu reduzieren und die automatische Re-Render-Optimierung für skalierbare UI Logik.
• react-call - Rufen Sie an React Bauteile.
• redux-auth-patch - Vollständiges Token-Authentifizierungssystem für react + redux die isomorphe Wiedergabe unterstützt.
• redux-search - Redux Bindungen für die clientseitige Suche.
• tcomb-react - Alternative Syntax für PropTypes.
• react-universal-hooks - :tada: Unterstützung react Haken überall (funktionale oder Klassenkomponente).

Versorgungsunternehmen

Back to top ⬆️

• qrcode.react - A <QRCode/>Komponente zur Verwendung mit React.
• <qr-code> – A no-dependencies, customizable, animate-able, SVG-based <qr-code> element.
• react-children-utilities - Erweiterte Utils für ReactKinder.
• react-media - A CSS Medienabfragekomponente für React.
• react-middle-ellipsis - demo - Lange Saiten in der Mitte statt am Ende.
• react-translate-component - Mehrsprachiger/lokalisierter Textinhalt.

i18n

Internationalisierung / L10n / Lokalisierung / Übersetzung

• react-i18next - Internationalisierung für react richtig gemacht. Mit dem i18next i18n Ökosystem.
• react-intl - Internationalisierung React Apps.
• react-localized - Internationalisierung für React Komponenten basierend auf gettext Format.
• react-translate-maker - Universale Internationalisierung ()i18nOpen Source Bibliothek für React.
• react-intl-universal - demo Internationalisierung React Apps. Nicht nur für React.Component aber auch für Vanilla JS.
• @tolgee/react - docs – Webbasiertes Lokalisierungstool, mit dem Benutzer direkt im React App, die sie entwickeln
• js-lingui - docs – Eine lesbare, automatisierte und optimierte (5 kb) Internationalisierung für JavaScript.

Framework-Bindungen / Integrationen

• backbone-react-component - Ein bisschen raffinierter Kleber, der Ihre Backbone-Modelle automatisch anschließt.
• elm-react-component - A React Bauteil, das ein Elm-Modul zur Verwendung in einem React Anwendung.
• gl-react - OpenGL / WebGL Bindungen für React komplexe Effekte über Bilder und Inhalte zu implementieren.
• react-backbone - Backbone-aware Mixins für react Und noch viel mehr.
• react-d3-library - Open-Source-Bibliothek zur Verwendung von D3 in React.
• react-elm-components - Schreiben React Komponenten in Elm.
• react-famous - React Brücke zu Famo.us.
• react-localstorage - Einfache, komponentenbasierte Localstorage-Implementierung für Facebook’s React.
• react-lottie-player - demo - Deklarative Lottie Animation Player.
• react-on-rails - Integration von React + Webpack + Rails zum Erstellen universeller (isomorpher) Apps.
• react-three-renderer - Rendern in ein Three.js Canvas mit React.
• react-threejs - Einfachste Bindungen zwischen React & Three.js
• reactfire - ReactJS Mixin für einfache Firebase-Integration.
• reactive-elements - Ermöglicht die Verwendung React.js Komponente als HTML Element (Webkomponente).
• react-unity-webgl - Einheitsintergration mit Zwei-Wege-Kommunikation unter Verwendung eines eingebauten Ereignissystems.

Integrationen mit Drittanbieterdiensten

• react-ga - React Google Analytics Modul.
• react-google-analytics - Google Analytics Komponente.
• react-google-autocomplete - Google platziert API-Komponenten und Hooks.
• react-recaptcha - A react.js reCAPTCHA für Google.
• react-stripe-checkout - Load stripe’s checkout.js als ein react Bauteil. Einfachste Möglichkeit, Checkout mit React.
• redux-segment - Segment.io Analytics Integration für redux.
• react-slack-notification - Senden Sie Nachrichten und Fehlerprotokolle direkt an einen Slack-Kanal.
• react-firebase-hooks - Haken, um Firebase in Ihre Anwendung zu integrieren.

Leistung

Back to top ⬆️

UI

• inferno - Eine extrem schnelle, React- wie JavaScript Bibliothek zum Aufbau moderner Benutzeroberflächen.
• react-fastclick - Fast Touch Events für React.
• react-static-container - Rendert statische Inhalte effizient.

Inspektion

• react-perf-tool - Debug-Leistung Ihrer React Anwendung.
• react-render-visualizer - Render Visualizer für ReactJS.

Lazy Load

• react-infinite-grid - A React eine Komponente, die ein Raster von Elementen darstellt.
• react-infinite - Ein browserbereiter effizienter Scrolling-Container basierend auf UITableView.
• react-lazy-load - React Eine Komponente, die Kinderelemente darstellt, wenn sie den Viewport betreten.
• react-lazyload - Lazyload Ihre Komponente, Bild oder alles, was die Leistung zählt.
• react-virtualized - React Komponenten zum effizienten Rendern großer Listen und tabellarischer Daten.

App Größe

• babel-plugin-transform-react-remove-prop-types - unnötig entfernen React propTypes.
• react-lite - Eine Umsetzung von React Optimiert für kleine Skriptgröße.

Server-Side Rendering

• iSSR - Der einfachste Weg, Ihre React Anwendung auf Server-Side Rendering. Behandelt Nebenwirkungen und synchronisiert den Zustand.
• react-esi - Eine Bibliothek zur Steigerung der SSR-Leistung durch Belichtung React Komponenten als Edge Side Includes (ESI) Fragmente

Dev Tools

Back to top ⬆️

Test

• enzyme - JavaScript Testprogramme für React.
• jest-cli - schmerzlos JavaScript Prüfung.
• react-unit - Leichtgewichtsprüfbibliothek für ReactJS.
• redux-test-recorder - A redux Middleware zur automatischen Generierung von Tests für Reduzierer durch ui Interaktion.
• rut - React Testen leicht gemacht mit react-test-renderer. Stützen DOM und Custom Renderer.
• unexpected-react - Plugin für Unerwartetes, um das Testen der vollen React Virtuelle DOMund auch der flache Renderer.
• playwright enables reliable end-to-end testing for modern web apps.

Redux

• redux-devtools-chart-monitor - Ein Chartmonitor für Redux DevTools.
• redux-devtools-dock-monitor - Ein veränderliches und bewegliches Dock für Redux DevTools überwacht.
• redux-devtools-filterable-log-monitor - Filterbarer Baumansichtsmonitor für Redux DevTools.
• redux-devtools-inspector - Ein anderes Redux DevTools Monitor.
• redux-devtools-log-monitor - Der Default Monitor für Redux DevTools mit einer Baumansicht.
• redux-devtools - DevTools für Redux mit Hot Reloading, Action Replay und anpassbar UI.
• remote-redux-devtools - Redux DevTools remote.

Inspektion

• fluxguard - PROD Change Monitoring, das alle hervorhebt DOM + design Änderungen.
• react-inspector - Power of Browser DevTools Inspektoren direkt in Ihrem React App.
• reactotron - Eine CLI- und OS X-App zur Inspektion Ihrer React JS und React Native Apps.
• Tail Lens - Tailwind Editor im Browser: Inspect, Edit, Preview, Copy.

Verschiedenes

• component-controls - demo - docs Ein Werkzeug der nächsten Generation, um blitzschnelle Dokumentationsseiten zu erstellen.
• cosmos-js - DX-Tool zum Entwerfen wirklich gekapselt React Bauteile.
• react-demo-tab-cli - CLI-Tool zum Erstellen von Demos von react Bauteile.
• react-styleguidist - React Style Guide Generator.
• standard-react - JavaScript Standard Style Guide.
• Plasmic - Mächtig design Werkzeug zum Aufbau Ihres React Komponenten visuell.
• SimpleLocalize - Open Source CLI Tool zum Finden i18n Schlüssel in React Projekte.
• react-device-frameset - React Geräterahmensatzkomponente.

Verschiedenes

Back to top ⬆️

• DataFormsJS JSX Loader - Klein JavaScript Compiler zum schnellen Konvertieren von JSX in JS direkt auf einer Webseite.
• html-to-react-components - Extrakt annotierte Teile von HTML in React Komponenten als separate Module.
• htmltojsx - Automatisch AJAXify plain HTML Mit der Kraft der ReactEs ‘s Magie!
• jsonx - React JSON Syntax.
• mozaik - Mozaïk ist ein Tool basierend auf nodejs / react / d3 / Stylus, um einfach schöne Dashboards zu erstellen.
• react-blessed - A react Renderer für gesegnet.
• jsondiffpatch-react - JSON diffing.
• iron-session - Sichere, zustandslose und Cookie-basierte Sitzungsbibliothek.

Statischer Website Generator

• gatsby - Verwandeln Sie Klartext in dynamische Blogs und Websites mit React.js.

Cloud-Lösungen

Back to top ⬆️

Datenbanken

• BCMS - API-basiertes, Open-Source, selbsthostables Content Management System für Gatsby, Nuxt und Next.
• crisp-bigquery - Google BigQuery mit Express in TypeScript.
• react-server-routing-example - Universales Client/Server-Routing und Daten mit AWS DynamoDB.