https://github.com/w3ss127/ionic-react-qrcode-scanner
The Ionic React QR Code Scanner is a lightweight, browser-based QR code reader built with modern web technologies.
https://github.com/w3ss127/ionic-react-qrcode-scanner
ionic qrcode-scanner
Last synced: about 2 months ago
JSON representation
The Ionic React QR Code Scanner is a lightweight, browser-based QR code reader built with modern web technologies.
- Host: GitHub
- URL: https://github.com/w3ss127/ionic-react-qrcode-scanner
- Owner: w3ss127
- Created: 2025-05-14T04:01:03.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-15T02:50:57.000Z (about 1 year ago)
- Last Synced: 2025-06-18T00:02:25.144Z (about 1 year ago)
- Topics: ionic, qrcode-scanner
- Language: TypeScript
- Homepage:
- Size: 430 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ionic QR Code Scanner (React)
A simple and responsive QR code scanner app built with **Ionic React** and `react-qr-barcode-scanner`. This web-based scanner uses the device's **camera** to detect and read QR codes in real-time, directly from your browser.
## Features
* Real-time QR code scanning via webcam
* Browser-based — no native installation required
* Clean and mobile-friendly UI with scan animation
* Built using modern Ionic React components
## Tech Stack
* **Framework**: Ionic React + TypeScript
* **QR Scanner**: [`react-qr-barcode-scanner`](https://www.npmjs.com/package/react-qr-barcode-scanner)
* **UI Components**: `IonPage`, `IonContent`, `IonButton`, etc.
## Installation
Clone the repository and install dependencies:
```bash
git clone https://github.com/dtoyoda10/ionic-react-qrcode-scanner.git
cd ionic-react-qrcode-scanner
npm install
npm start
```
## Usage
Run the development server:
```bash
ionic serve
```
Open the app in your browser at `http://localhost:8100`. Grant camera permission when prompted.
## Project Structure
```
src/
├── assets/
│ └── icons/ # Scanner icon
├── components/
│ └── Layout.tsx # Reusable layout wrapper
├── pages/
│ └── scanner.page.tsx # Main scanner page
├── App.tsx # App entry and routing
└── main.tsx # Bootstrap file
```
## Screenshots
## Production Build
To generate a production build:
```bash
ionic build
```
The compiled app will be output to the `build/` directory. You can deploy it to any static hosting service like **Vercel**, **Netlify**, or **Firebase Hosting**.
## Browser Compatibility
* Works in all modern browsers that support webcam access
* ✅ Chrome (Desktop & Mobile)
* ✅ Safari (iOS)
* ⚠️ Firefox support may vary depending on device
> For **native app support**, consider using:
> [`@capacitor-community/barcode-scanner`](https://www.npmjs.com/package/@capacitor-community/barcode-scanner)
## License
This project is licensed under the [MIT License](./LICENSE).