React Barcode Scanner
Table of contents
- Use Case
- Compatibility
- Installation
- Example Usage
- BarcodeScanner API
- Browser support
- Issues
- Contributing
- License
Use Case
You need a component for scanning QR codes or other barcodes from a web browser based app.
Compatibility
This component has been tested in the following browsers:
- Chrome Mac OS & Android
- Firefox Mac OS & Android
- Safari Mac OS & iOS
Since this library does internal use of hooks you need React >= 16.8.0
.
This library utilizes the ZXing library and therefore supports all their supported formats of 1D and 2D barcodes.
Installation
You can install this library via yarn or npm.
yarn
yarn add @thewirv/react-barcode-scanner
npm
npm i @thewirv/react-barcode-scanner
Example Usage
After reading and performing the previous steps, you should be able to import the library and use it like in this example:
import {useState} from 'react';
import {BarcodeScanner} from '@thewirv/react-barcode-scanner';
const Test = (props: Props) => {
const [data, setData] = useState('No result');
return (
<>
<BarcodeScanner
onSuccess={(text) => setData(text)}
onError={(error) => {
if (error) {
console.error(error.message);
}
}}
onLoad={() => console.log('Video feed has loaded!')}
containerStyle={{width: '100%'}}
/>
<p>{data}</p>
</>
);
};
Component API
The BarcodeScanner
component has the following props:
Properties | Types | Default Value | Required | Description |
---|---|---|---|---|
doScan |
boolean |
true |
☐ | Controls whether the scanner should be scanning or not |
constraints |
MediaTrackConstraints | { facingMode: 'user' } |
☐ | Specify which camera should be used (if available) |
onSuccess |
(text: string) => void |
none | 🗹 | Callback for retrieving the result |
onError |
(e?: Error) => void |
none | ☐ | Callback for retrieving the error when one occurs |
onLoad |
() => void |
none | ☐ | Callback for when the video feed has been loaded |
videoId |
string |
'video' |
☐ | The ID for the video element |
Viewfinder |
React.ReactElement |
none | ☐ | Viewfinder component to rendering over the video element |
containerStyle |
React.CSSProperties |
none | ☐ | Style object for the wrapping container element |
videoContainerStyle |
React.CSSProperties |
none | ☐ | Style object for the video container element |
videoStyle |
React.CSSProperties |
none | ☐ | Style object for the video element |
Maintainers
- Improved by @TheWirv .
- Created by @JodusNodus .
- Revived thanks to @JonatanSalas and his company @BlackBoxVision .
Browser Support
If you need to support older browsers, checkout this guide in how to make it compatible with legacy ones
Issues
Please, open an issue following one of the issues templates. We will do our best to fix them.
License
Distributed under the MIT license. See LICENSE for more information.