1.0.1 • Published 4 years ago

react-code-scanner v1.0.1

Weekly downloads
5
License
MIT
Repository
github
Last release
4 years ago

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

namedefaultmeaning
width400the width in px of the camera view
height300the heigth in px of the camera view
onResultconsole.logthe callback that is invoked when a code is decoded
onErrorconsole.errorthe callback that is invoked when an error occours
maxVideoWidth640the width in px of the image taken from the camera and passed to the scanner
maxVideoHeight640the 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
mirrorUserImagetrueif true the component will mirror the image when using the front camera
1.0.1

4 years ago

1.0.0

4 years ago