{"id":16986055,"url":"https://github.com/chung-leong/react-barcode-detection","last_synced_at":"2025-04-12T03:32:21.733Z","repository":{"id":102987735,"uuid":"606441275","full_name":"chung-leong/react-barcode-detection","owner":"chung-leong","description":"Easy-to-use React component for detecting barcodes","archived":false,"fork":false,"pushed_at":"2023-03-13T14:10:53.000Z","size":12188,"stargazers_count":9,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-19T04:02:56.067Z","etag":null,"topics":["barcode","barcode-scanner","ean","ean13","qr-code","qrcode-scanner","upc"],"latest_commit_sha":null,"homepage":"https://chung-leong.github.io/react-barcode-detection/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chung-leong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-02-25T14:01:55.000Z","updated_at":"2024-10-11T22:54:10.000Z","dependencies_parsed_at":"2023-05-29T16:00:30.431Z","dependency_job_id":null,"html_url":"https://github.com/chung-leong/react-barcode-detection","commit_stats":{"total_commits":56,"total_committers":1,"mean_commits":56.0,"dds":0.0,"last_synced_commit":"087024479615d42495412e6953b472844be201bb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chung-leong%2Freact-barcode-detection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chung-leong%2Freact-barcode-detection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chung-leong%2Freact-barcode-detection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chung-leong%2Freact-barcode-detection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chung-leong","download_url":"https://codeload.github.com/chung-leong/react-barcode-detection/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248512505,"owners_count":21116614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["barcode","barcode-scanner","ean","ean13","qr-code","qrcode-scanner","upc"],"created_at":"2024-10-14T02:44:44.789Z","updated_at":"2025-04-12T03:32:21.706Z","avatar_url":"https://github.com/chung-leong.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-barcode-detection ![ci](https://img.shields.io/github/actions/workflow/status/chung-leong/react-barcode-detection/node.js.yml?branch=main\u0026label=Node.js%20CI\u0026logo=github) ![nycrc config on GitHub](https://img.shields.io/nycrc/chung-leong/react-barcode-detection)\n\nReact-barcode-detection provides an easy-to-use component that lets your app capture \nbarcodes of various formats, including 2D varieties such as QR code. It utilizes the \nnew [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API). \nOn [platforms that lack support](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector#browser_compatibility), \nthe library provides fallbacks for scanning QR code.\n\nVideo capture functionality is provided by \n[react-media-capture](https://github.com/chung-leong/react-media-capture#readme).\n\n# Insallation\n\n```sh\nnpm install --save-dev react-barcode-detection\n```\n\nIf you're using npm 14.x, you'll need to manually install the peer dependency \n[react-seq](https://github.com/chung-leong/react-media-capture#readme).\n\n# Basic usage\n\n```js\nimport { useState } from 'react';\nimport { BarcodeScanner } from 'react-barcode-detection';\n\nfunction QRScreen() {\n  const [ data, setData ] = useState();\n  return (\n    \u003cdiv className=\"QRScreen\"\u003e\n      \u003cBarcodeScanner onData={setData} /\u003e;\n      \u003cdiv className=\"data\"\u003e{data}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n`BarcodeScanner` connects to the device's camera and provides a live preview. By default it scans for QR code. When one enters into the camera's view, the component invokes the `onData` callback. When the code disappears, the same callback is given `undefined`.\n\n# Providing visual cue\n\nIt's important to let the user know that your app is able to recognize a code. Use the `cornerPoints` prop to tell `BarcodeScanner` to draw a quadrilateral where the code appears in the video:\n\n```js\nconst cp = {\n  stroke: '#00ff00',\n  fill: 'rgba(255, 0, 0, 0.25)',\n  lineWidth: 3,\n};\n\nfunction QRScreen() {\n  const [ data, setData ] = useState();\n  return (\n    \u003cdiv className=\"QRScreen\"\u003e\n      \u003cBarcodeScanner cornerPoints={cp} onData={setData} /\u003e;\n      \u003cdiv className=\"data\"\u003e{data}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nThe code above draws a quadrilateral with green outline and red translucent interior:\n\n![cornerPoints](./doc/images/screenshot-1.jpg)\n\nAlternately, you can draw a \"targetting box\" over the area by specifying `boundingBox`:\n\n```js\nconst bb = {\n  stroke: '#fff',\n  lineWidth: 4,\n  radii: 10,\n  gap: 0.5,\n  margin: 0.1\n};\n\nfunction QRScreen() {\n  const [ data, setData ] = useState();\n  return (\n    \u003cdiv className=\"QRScreen\"\u003e\n      \u003cBarcodeScanner boundingBox={bb} onData={setData} /\u003e;\n      \u003cdiv className=\"data\"\u003e{data}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n![boundingBox](./doc/images/screenshot-2.jpg)\n\nIf you app exits from the scanner screen as soon as it finds a correct code, you might choose to \ndelay the exit slightly so the user actually has a chance to see the visual indicator. In \nthat case you would want to make `clearInterval` longer (the default is 250ms) so the \ncode does not disappear (due to the user's shaky hand, for instance) during the delay.\n\nAnother way to let the user know that a code has been captured is to switch from the live video to a frozen frame. You app will receive a JPEG snapshot upon barcode detection when you provide a \n`onSnapshot` handler. \n\nCheck out the [live demo](https://chung-leong.github.io/react-barcode-detection/) to see the \ncomponent in action. You can see the source code [here](./demo/src/App.js).\n\n## Detecting other barcode types\n\n`BarcodeScanner` looks for QR codes by default. To scan for barcodes of other formats, \nset the `accept` prop to a comma-delimited list of formats: \n\n```js\nconst bb = {\n  stroke: '#fff',\n  lineWidth: 4,\n  radii: 10,\n  gap: 0.5,\n  margin: 0.1\n};\n\nfunction UTCScreen() {\n  const [ data, setData ] = useState();\n  return (\n    \u003cdiv className=\"UTCScreen\"\u003e\n      \u003cBarcodeScanner boundingBox={bb} accept=\"upc_a,upc_e\" onData={setData} /\u003e;\n      \u003cdiv className=\"data\"\u003e{data}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nA list of available formats can be found at\n[Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API#supported_barcode_formats).\n\n## QR code support fallback\n\nAs of writing, the \n[Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API#browser_compatibility) is not available on Windows or iOS. \nThis library provides fallback for scanning QR codes using \n[jsQR](https://github.com/cozmo/jsQR). \n\nA second fallback based on [quirc](https://github.com/dlbeer/quirc) is available. \nIt's more efficient since it uses WebAssembly, but is not as tolerant of poor \nlighting conditions as jsQR. It might be appropriate for less powerful mobile \ndevices. \n\nTo enable the use of quirc, set the `use` prop to \"api,quirc,jsqr\":\n\n```js\nconst cp = {\n  fill: 'rgba(0, 255, 0, 0.5)',\n};\n\nfunction UTCScreen() {\n  const [ data, setData ] = useState();\n  return (\n    \u003cdiv className=\"UTCScreen\"\u003e\n      \u003cBarcodeScanner cornerPoints={cp} use=\"api,quirc,jsqr\" onData={setData} /\u003e;\n      \u003cdiv className=\"data\"\u003e{data}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Live demo\n\nThe live demo is designed to run on either a desktop or a mobile environment. It shows you \nthe different ways your app can respond to the detection of a QR code.\n\n![live demo](./doc/images/screenshot-3.jpg)\n\nClick on one of the letters on the left to toggle the different methods. \"A\" is the\nBarcode API (will be used if available), \"Q\" is the WebAssembly-based quirc. \"J\" is \njsQR. \n\n## API Reference\n\n* [BarcodeScanner](./doc/BarcodeScanner.md#readme)\n* [BlobImage](./doc/BlobImage.md#readme)\n* [StreamVideo](./doc/StreamVideo.md#readme)\n* [useBarcodeDetection](./doc/useBarcodeDetection.md#readme)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchung-leong%2Freact-barcode-detection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchung-leong%2Freact-barcode-detection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchung-leong%2Freact-barcode-detection/lists"}