reactjs-qr-scanner

React.js-compatible QR code scanner component that enables easy integration of fast and reliable QR code scanning into web applications. Built on modern web APIs for camera access, it supports real-time scanning, customizable styles, and seamless integration with existing React projects.

📦 Dependencies

This package relies on the following libraries:

These dependencies will be installed automatically when you install this package.

Installation

From the project root:

  npm install reactjs-qr-scanner

usage

Import the component in your React app:

import { useState } from "react";
import ReactQrScanner from "reactjs-qr-scanner";

function App() {
  // State to control whether the scanner is paused
  const [paused, setPaused] = useState(false);

  return (
    <div className="App">
      {/* Toggle Pause Button */}
      <button onClick={() => setPaused(!paused)}>
        {paused ? "Resume" : "Pause"} Scanner
      </button>

      {/* QR Scanner Component */}
      <ReactQrScanner
        onScan={(qrdata) => {
          console.log(qrdata?.data);
        }}
        onError={(error) => {
          console.error(error);
        }}
        paused={paused}
        classNames={{
          video: "w-100",
        }}
      />
    </div>
  );
}

export default App;

Features

• Real-time QR code scanning using the camera
• Small, framework-friendly React component
• Customizable UI

Requirements

• React 18 or later
• npm (or a compatible package manager)

Development

The repository includes a small development/playground workflow. To run the local dev environment (watches the library build and runs the playground):

npm run dev

What the dev script does (from package.json):

• Runs Rollup in watch mode to rebuild dist/ on changes
• Starts the playground app (if present) so you can test the component in a live environment

If you only want to watch and rebuild the library without starting the playground:

npm run watch

Build (production)

To create the distributable bundles in dist/:

npm run build

This will run a prebuild step which removes dist/ and then run Rollup according to rollup.config.js.

Troubleshooting — Rollup / @rollup/plugin-typescript error

Symptom:

[plugin typescript] @rollup/plugin-typescript TS18003: No inputs were found in config file '.../tsconfig.json'. Specified 'include' paths were '["src"]' and 'exclude' paths were '[]'.
[!] (plugin typescript) RollupError: [plugin typescript] @rollup/plugin-typescript: Couldn't process compiler options

Cause and fixes:

1. Missing src entry files

   • The TypeScript plugin looks for files matched by tsconfig.json include (commonly src). If the src directory is missing or empty, you'll get this error.
   • Fix: create an entry file such as src/index.ts or src/index.tsx that exports your component(s).

   Example minimal src/index.tsx (create this file if you don't have an entry yet):

   import React from 'react';
   
   export const QRScanner = () => <div>QR Scanner placeholder</div>;
   
   export default QRScanner;

   You can create it from PowerShell (project root):

   mkdir src
   Set-Content -Path .\src\index.tsx -Value "import React from 'react';\r\nexport const QRScanner = () => <div>QR Scanner placeholder</div>;\r\nexport default QRScanner;"

2. tsconfig.json include doesn't match your source layout

• Open tsconfig.json and confirm include includes the files you actually use (for example ["src"] or ["src/**/*"]). If your sources live in a different folder, update include accordingly.

• Example tsconfig.json include that matches a typical src layout:

  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]

3. Rollup input mismatch

• If Rollup is configured to use a different entry path, update rollup.config.js to point at your actual entry file (for example input: 'src/index.tsx'). The TypeScript plugin needs Rollup to provide an entry file that resolves to your source files.

4. Missing type packages

• If you use React with TypeScript you should have the React types available. You can install them as dev dependencies:

  npm install -D @types/react @types/react-dom

Quick troubleshooting checklist

• Ensure src/ exists and contains an entry file (src/index.ts or src/index.tsx).
• Ensure tsconfig.json include covers your source files.
• Ensure rollup.config.js input points to the proper entry (commonly src/index.ts or src/index.tsx).
• Install React type packages if you use TypeScript in the library or the playground.

playground

The dev script in package.json runs a watch build and (if present) starts the playground app. To start only the playground (if a subfolder exists):

npm run start --prefix playground

lincense

MIT License

Copyright (c) 2025 - Imran Kaleel

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Author

@Imran Kaleel
• GitHub • npm