{"_id":"@adarshsingh87/react-qr-reader","name":"@adarshsingh87/react-qr-reader","dist-tags":{"latest":"3.0.0-beta-1"},"versions":{"3.0.0-beta-1":{"name":"@adarshsingh87/react-qr-reader","version":"3.0.0-beta-1","description":"A React Component for reading QR codes from the webcam","scripts":{"build":"rollup -c","prepublish":"yarn build","lint":"eslint --fix 'src/**'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/react-qr-reader/react-qr-reader.git"},"keywords":["react","qr","qrcode","qrreader"],"author":{"name":"thomas billiet"},"license":"MIT","bugs":{"url":"https://github.com/react-qr-reader/react-qr-reader/issues"},"homepage":"https://github.com/react-qr-reader/react-qr-reader#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"dependencies":{"@zxing/browser":"0.0.7","@zxing/library":"^0.18.3","rollup":"^2.67.2"},"devDependencies":{"@babel/core":"^7.12.0","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-proposal-object-rest-spread":"^7.11.0","@babel/plugin-proposal-optional-chaining":"^7.11.0","@babel/preset-react":"^7.10.4","@babel/preset-typescript":"^7.10.4","@commitlint/cli":"^11.0.0","@commitlint/config-conventional":"^11.0.0","@rollup/plugin-commonjs":"^21.0.1","@rollup/plugin-node-resolve":"^13.1.3","@rollup/plugin-typescript":"^8.3.0","@storybook/addon-essentials":"^6.1.21","@storybook/react":"^6.1.21","@storybook/storybook-deployer":"^2.8.10","@types/react":"^16.9.49","@typescript-eslint/eslint-plugin":"^4.1.0","@typescript-eslint/parser":"^4.1.0","babel-eslint":"^10.1.0","babel-loader":"^8.1.0","eslint":"^7.18.0","eslint-config-react-app":"^5.2.1","eslint-plugin-flowtype":"^5.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.6","eslint-plugin-react-hooks":"^4.1.2","husky":"^4.3.0","lint-staged":"^10.3.0","prettier":"^2.1.1","react":"^16.13.1","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.13.1","rollup-plugin-dts":"^4.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","rollup-plugin-web-worker-loader":"^1.6.1","source-map-explorer":"^2.5.0","ts-loader":"^8.0.3","typescript":"^4.0.2"},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS","pre-commit":"lint-staged"}},"lint-staged":{"*.{ts,tsx,js,json,css,md,scss}":["prettier --write","git add"]},"gitHead":"ed0131f7b92e3e04228d5fd53e954a9035bfee97","_id":"@adarshsingh87/react-qr-reader@3.0.0-beta-1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-0oNgg2FQXNzpFSIWP+zYuhZ6Qu8CgNAEV3YcxVB5mcU+8gLxfym6lU1jE+phOlAHFL7/EDWYUJHU5xJduRD8CA==","shasum":"7e5c120f58ddb2ef71e3d19d3405116447e294ed","tarball":"https://registry.npmjs.org/@adarshsingh87/react-qr-reader/-/react-qr-reader-3.0.0-beta-1.tgz","fileCount":20,"unpackedSize":25374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGFJiKwEHHQMANuFmds5xRoZjhle6bY9epI4NoyEMIZZAiEA5pBuLJ3GYh930fGQGqEYqGYMjzi83BJBUix5FhwqCZc="}]},"_npmUser":{"name":"adarshsingh87","email":"adarshmanoj.05.as@gmail.com"},"directories":{},"maintainers":[{"name":"adarshsingh87","email":"adarshmanoj.05.as@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-qr-reader_3.0.0-beta-1_1695885349843_0.8467970304224615"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-28T07:15:49.728Z","3.0.0-beta-1":"2023-09-28T07:15:50.127Z","modified":"2023-09-28T07:15:50.376Z"},"maintainers":[{"name":"adarshsingh87","email":"adarshmanoj.05.as@gmail.com"}],"description":"A React Component for reading QR codes from the webcam","homepage":"https://github.com/react-qr-reader/react-qr-reader#readme","keywords":["react","qr","qrcode","qrreader"],"repository":{"type":"git","url":"git+https://github.com/react-qr-reader/react-qr-reader.git"},"author":{"name":"thomas billiet"},"bugs":{"url":"https://github.com/react-qr-reader/react-qr-reader/issues"},"license":"MIT","readme":"# React QR Reader [![npm version](https://badge.fury.io/js/react-qr-reader.svg)](https://badge.fury.io/js/react-qr-reader) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/react-qr-reader/react-qr-reader/badge.svg)](https://snyk.io/test/github/react-qr-reader/react-qr-reader)\n\n:rocket: React QR Reader component. Check out the [demo](https://react-qr-reader.github.io/react-qr-reader/).\n\n## Table of contents\n\n- [Use Case](#use-case)\n- [Compatibility](#compatibility)\n- [Installation](#installation)\n - [NPM](#npm)\n - [YARN](#yarn)\n- [Example Usage](#example-usage)\n- [QrReader 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 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\n## Installation\n\nYou can install this library via NPM or YARN.\n\n### NPM\n\n```bash\nnpm i react-qr-reader\n```\n\n### YARN\n\n```bash\nyarn add react-qr-reader\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```javascript\nimport React, { useState } from 'react';\nimport { QrReader } from 'react-qr-reader';\n\nconst Test = (props) => {\n const [data, setData] = useState('No result');\n\n return (\n <>\n {\n if (!!result) {\n setData(result?.text);\n }\n\n if (!!error) {\n console.info(error);\n }\n }}\n style={{ width: '100%' }}\n />\n

{data}

\n \n );\n};\n```\n\n## Component API\n\nThe `QrReader` component has the following props:\n\n| Properties | Types | Default Value | Description |\n| ------------------- | ----------------------------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------- |\n| constraints | [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) | `{ facingMode: 'user' }` | Specify which camera should be used (if available). |\n| onResult | `function` | none | Scan event handler |\n| videoId | `string` | `video` | The ID for the video element |\n| scanDelay | `number` | `500` | The scan period for the QR hook |\n| ViewFinder | component | none | ViewFinder component to rendering over the video element |\n| className | string | none | ClassName for the container element. |\n| containerStyle | object | none | Style object for the container element. |\n| videoContainerStyle | object | none | Style object for the video container element. |\n| videoStyle | object | none | Style object for the video element. |\n\n## Maintainers\n\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/react-qr-reader/react-qr-reader/issues) following one of the issues templates. We will do our best to fix them.\n\n## Contributing\n\nIf you want to contribute to this project see [contributing](https://github.com/react-qr-reader/react-qr-reader/blob/master/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the **MIT license**. See [LICENSE](https://github.com/react-qr-reader/react-qr-reader/blob/master/LICENSE) for more information.\n","readmeFilename":"README.md"}