{"_id":"@amosschann/react-barcode-scanner","name":"@amosschann/react-barcode-scanner","dist-tags":{"latest":"3.4.0"},"versions":{"3.4.0":{"name":"@amosschann/react-barcode-scanner","version":"3.4.0","description":"A React component for scanning QR codes and other barcodes via webcam","author":{"name":"Marcel Grünwald"},"license":"MIT","type":"module","repository":{"type":"git","url":"git+https://github.com/compeso-mgruenwald/react-barcode-scanner.git"},"homepage":"https://github.com/compeso-mgruenwald/react-barcode-scanner#readme","bugs":{"url":"https://github.com/compeso-mgruenwald/react-barcode-scanner/issues"},"keywords":["react","qr","code","barcode","scanner","qrcode","qrreader","qrscanner","qrcodescanner","barcodescanner","codescanner","qrcodereader"],"sideEffects":false,"publishConfig":{"access":"public"},"scripts":{"build":"bun run rimraf dist -I && bun run rollup -c rollup.config.js --configPlugin @rollup/plugin-typescript && bun run rimraf ./dist/types","prepublish":"bun run build","lint":"bun run eslint --quiet --fix 'src/**'","prepare":"bun run husky"},"source":"./src/index.ts","main":"./dist/index.min.cjs","module":"./dist/index.min.js","types":"./dist/index.d.ts","exports":{".":{"development":{"import":"./dist/index.js","require":"./dist/index.cjs"},"production":{"import":"./dist/index.min.js","require":"./dist/index.min.cjs"},"default":"./dist/index.min.cjs","types":"./dist/index.d.ts","source":"./src/index.ts"},"./package.json":"./package.json"},"dependencies":{"@zxing/browser":"^0.1.5","@zxing/library":"^0.21.3"},"devDependencies":{"@commitlint/cli":"^19.8.1","@commitlint/config-conventional":"^19.8.1","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.2","@trivago/prettier-plugin-sort-imports":"^5.2.2","@types/react":"^19.1.8","eslint":"^9.29.0","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.1","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-unused-imports":"^4.1.4","globals":"^16.2.0","husky":"^9.1.7","prettier":"^3.5.3","react":"^19.1.0","react-dom":"^19.1.0","react-icons":"^5.5.0","rimraf":"^6.0.1","rollup":"^4.43.0","rollup-plugin-dts":"^6.2.1","tslib":"^2.8.1","typescript":"^5.8.3","typescript-eslint":"^8.34.1"},"peerDependencies":{"react":"^16.8.0 || 17.x || 18.x || 19.x","react-dom":"^16.8.0 || 17.x || 18.x || 19.x","react-icons":">=4.8"},"engines":{"node":">=18"},"_id":"@amosschann/react-barcode-scanner@3.4.0","gitHead":"74252c6d44e74830fe6a48332f6233124cc71e80","_nodeVersion":"21.3.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-w+lHt1GnujYmW8kQ1Ngh0h4H09uEpuzFPVQcsnmtkJqJWP8pAuXeqhDVilBi1vOap6VmTqvIbzOuRCUR7ZenNg==","shasum":"231f2e7fd7b5355ba2c8f37751929b95cba47cfd","tarball":"https://registry.npmjs.org/@amosschann/react-barcode-scanner/-/react-barcode-scanner-3.4.0.tgz","fileCount":8,"unpackedSize":29155,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE5ODUyW2vnafSYaKyTOeK1W2/J7bVuLHYd4mmaMJo9rAiApI7PAlHxqNcd98hmUjssqST3DVSQ6Siwv158V0IWzww=="}]},"_npmUser":{"name":"amoschan1","email":"amoschan1@gmail.com"},"directories":{},"maintainers":[{"name":"amoschan1","email":"amoschan1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-barcode-scanner_3.4.0_1774498414017_0.6679953779311434"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-26T04:13:33.920Z","3.4.0":"2026-03-26T04:13:34.152Z","modified":"2026-03-26T04:13:34.682Z"},"maintainers":[{"name":"amoschan1","email":"amoschan1@gmail.com"}],"description":"A React component for scanning QR codes and other barcodes via webcam","homepage":"https://github.com/compeso-mgruenwald/react-barcode-scanner#readme","keywords":["react","qr","code","barcode","scanner","qrcode","qrreader","qrscanner","qrcodescanner","barcodescanner","codescanner","qrcodereader"],"repository":{"type":"git","url":"git+https://github.com/compeso-mgruenwald/react-barcode-scanner.git"},"author":{"name":"Marcel Grünwald"},"bugs":{"url":"https://github.com/compeso-mgruenwald/react-barcode-scanner/issues"},"license":"MIT","readme":"# React Barcode Scanner [![npm version](https://badge.fury.io/js/@thewirv%2Freact-barcode-scanner.svg)](https://badge.fury.io/js/@thewirv%2Freact-barcode-scanner) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/compeso-mgruenwald/react-barcode-scanner/badge.svg)](https://snyk.io/test/github/compeso-mgruenwald/react-barcode-scanner)\n\n:rocket: React Barcode Scanner component.\n\n## Table of contents\n\n- [Use Case](#use-case)\n- [Compatibility](#compatibility)\n- [Installation](#installation)\n - [bun](#bun)\n - [yarn](#yarn)\n - [npm](#npm)\n- [Example Usage](#example-usage)\n- [BarcodeScanner API](#component-api)\n- [Browser support](#browser-support)\n- [Issues](#issues)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Use Case\n\nYou need a component for scanning QR codes or other barcodes from a web browser based app.\n\n## Compatibility\n\nThis component has been tested in the following browsers:\n\n- Chrome Mac OS & Android\n- Firefox Mac OS & Android\n- Safari Mac OS & iOS\n\nSince this library does internal use of hooks you need `React >= 16.8.0`.\n\nThis library utilizes the [ZXing library](https://github.com/zxing-js/browser) and therefore supports all their [supported formats](https://github.com/zxing-js/library#supported-formats) of 1D and 2D barcodes.\n\n## Installation\n\nYou can install this library via bun, pnpm, yarn, or npm.\n\n### bun\n\n```bash\nbun add @thewirv/react-barcode-scanner\n```\n\n### pnpm\n\n```bash\npnpm add @thewirv/react-barcode-scanner\n```\n\n### yarn\n\n```bash\nyarn add @thewirv/react-barcode-scanner\n```\n\n### npm\n\n```bash\nnpm i --save @thewirv/react-barcode-scanner\n```\n\n## Example Usage\n\nAfter reading and performing the previous steps, you should be able to import the library and use it like in this example:\n\n```typescript\nimport {useState} from 'react';\nimport {BarcodeScanner} from '@thewirv/react-barcode-scanner';\n\nfunction Test(props: Props) {\n const [data, setData] = useState('No result');\n\n return (\n <>\n setData(text)}\n onError={(error) => {\n if (error) {\n console.error(error.message);\n }\n }}\n onLoad={() => console.log('Video feed has loaded!')}\n containerStyle={{width: '100%'}}\n />\n

{data}

\n \n );\n}\n```\n\n## Component API\n\nThe `BarcodeScanner` component has the following props:\n\n| Properties | Types | Default Value | Required | Description |\n| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | -------- | ----------------------------------------------------------------- |\n| `doScan` | `boolean` | `true` | ☐ | Controls whether the scanner should be scanning or not |\n| `constraints` | [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) | `{ facingMode: 'user' }` | ☐ | Specify which camera should be used (if available) |\n| `onSuccess` | `(text: string) => void` | none | 🗹 | Callback for retrieving the result |\n| `onError` | `(e?: Error) => void` | none | 🗹 | Callback for retrieving the error if one occurs |\n| `onLoad` | `() => void` | none | ☐ | Callback for when the camera feed has been loaded |\n| `Viewfinder` | `React.ReactElement` | none | ☐ | Viewfinder component to render on top of the `video` element |\n| `containerStyle` | `React.CSSProperties` | none | ☐ | Style object for the whole component's wrapping `section` element |\n| `videoContainerStyle` | `React.CSSProperties` | none | ☐ | Style object for the video's container `div` element |\n| `videoStyle` | `React.CSSProperties` | none | ☐ | Style object for the `video` element |\n| `videoProps` | Either object of type `VideoHTMLAttributes` or function that returns such an object and gets passed the default values set by this package | Check `defaultVideoProps` inside `src/BarcodeScanner/index.tsx` | ☐ | Passed to the underlying `video` element |\n\n## Maintainers (latest to earliest)\n\n- Currently maintained by [@compeso-mgruenwald](https://github.com/compeso-mgruenwald).\n- Improved by [@TheWirv](https://github.com/TheWirv).\n- Created by [@JodusNodus](https://github.com/JodusNodus).\n- Revived thanks to [@JonatanSalas](https://github.com/JonatanSalas) and his company [@BlackBoxVision](https://github.com/BlackBoxVision).\n\n## Browser Support\n\nIf you need to support older browsers, checkout [this guide](https://github.com/zxing-js/library#browser-support) in how to make it compatible with legacy ones\n\n## Issues\n\nPlease, open an [issue](https://github.com/compeso-mgruenwald/react-barcode-scanner/issues) following one of the issues templates. We will do our best to fix them.\n\n## License\n\nDistributed under the **MIT license**. See [LICENSE](https://github.com/compeso-mgruenwald/react-barcode-scanner/blob/master/LICENSE) for more information.\n","readmeFilename":"README.md","_rev":"1-b90822609c7b0effb4639a27a5d09c21"}