Wie kann man in React eine QR Code Reader Funktionalität implementieren?

02.03.2026

Melden

Einführung in QR Code Reader mit React

QR Codes sind heutzutage ein weitverbreitetes Mittel zur schnellen Übertragung von Informationen.

Wenn man eine Webanwendung mit React entwickelt, kann es sinnvoll sein, eine Funktion einzubauen,

die QR Codes direkt im Browser ausliest. Dies ermöglicht es Nutzern, schnell und unkompliziert Daten

React ist eine JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Um einen QR Code Reader einzubauen,

benötigt man Zugriff auf die Kamera und eine Möglichkeit, den QR Code zu erkennen und auszulesen.

Dafür gibt es verschiedene Libraries, die diese Aufgabe erleichtern. Die Kamera wird über die Web-API

getUserMedia angesprochen, und die Bilddaten werden anschliessend von einer QR Code Erkennungsbibliothek verarbeitet.

Es gibt mehrere Libraries, die speziell für React entwickelt wurden oder leicht integrierbar sind, um QR Codes auszulesen.

Eine sehr gebräuchliche ist react-qr-reader, die eine einfache Komponente zur Verfügung stellt,

welche die Kamera öffnet und automatisch die QR Codes erkennt. Eine Alternative ist html5-qrcode

zusammen mit eigenen React-Komponenten. Beide Ansätze erlauben eine unkomplizierte Einbindung.

Zunächst installiert man eine passende Bibliothek via npm oder yarn. Danach wird die Komponente in eine React-Anwendung eingebunden.

Sie verwendet die Kamera, zeigt das Bild live an und gibt den erkannten QR Code Text aus. Optional kann man überlegen,

wie man mit Fehlern umgeht, zum Beispiel, wenn die Kamera nicht freigegeben wird oder kein QR Code erkannt wird.

Ein einfaches Beispiel mit react-qr-reader besteht darin, die Komponente in JSX einzufügen und einen Callback zu definieren,

der bei erfolgreichem Scan die Daten verarbeitet. Dabei sollte die Kamera-Berechtigung beachtet werden.

Weitere Anpassungen können das Styling, das Handling von mehreren QR Codes oder das Speichern der gescannten Daten betreffen.

Die Implementierung eines QR Code Readers in React ist heute dank vorhandener Libraries und moderner Browser-APIs relativ unkompliziert.

Es ermöglicht Webentwicklern, interaktive und nutzerfreundliche Anwendungen zu erschaffen, die QR Codes ohne zusätzlichen Aufwand auslesen können.