1.0.1 • Published 5 years ago
react-code-scanner v1.0.1
React Code Scanner
A react component to scan bar codes and qr codes, it uses the zbar.wasm library in a web worker.
This uses hooks, so needs React >= 16.8
## Install
npm i react-code-scanner
Usage
const [result, setResult] = useState('');
const [facingMode, setFacingMode] = useState('environment');
return (
  <div className="App">
    <h1>Code Scanner</h1>
    <div>Result: {result}</div>
    <div>
      <button onClick={() => setResult('')}>reset</button>
    </div>
    <div>
      <button
        onClick={() =>
          setFacingMode(facingMode === 'environment' ? 'user' : 'environment')
        }
      >
        current camera: {facingMode} switch camera
      </button>
    </div>
    <CodeScanner
      onResult={res => setResult(res.map(({ value }) => value).join(', '))}
      onError={setResult}
      facingMode={facingMode}
    />
  </div>
);Props
| name | default | meaning | 
|---|---|---|
| width | 400 | the width in px of the camera view | 
| height | 300 | the heigth in px of the camera view | 
| onResult | console.log | the callback that is invoked when a code is decoded | 
| onError | console.error | the callback that is invoked when an error occours | 
| maxVideoWidth | 640 | the width in px of the image taken from the camera and passed to the scanner | 
| maxVideoHeight | 640 | the width in px of the image taken from the camera and passed to the scanner | 
| facingMode | 'environment' | this prop is used by devices with a back and a front camera and takes 2 values: 'environment' to use the back camera and 'user' to use the front camera | 
| codeOverlayColor | '#00ff00' | the color of the code overlay that is dispalyed when a code is recognized | 
| codeIndexColor | '#ff0000' | the color of the progressivo code id that is dispalyed when a code is recognized | 
| mirrorUserImage | true | if true the component will mirror the image when using the front camera |