Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@blackbox-vision/react-qr-reader

0.3.1 • Public • Published

Lib logo

React QR Reader npm version License: MIT Known Vulnerabilities

🚀 React QR Reader component. Check out the demo.

Install

You can install this library via NPM or YARN.

NPM

npm i @blackbox-vision/react-qr-reader

YARN

yarn add @blackbox-vision/react-qr-reader

Usage

The usage is really simple:

import React, { useState } from 'react';
import { QrReader } from '@blackbox-vision/react-qr-reader';
 
const Test = (props) => {
  const [data, setData] = useState('No result');
 
  const handleScan = (data) => {
    if (data) {
      setData(data);
    }
  };
 
  const handleError = (err) => console.error(err);
 
  return (
    <>
      <QrReader
        onScan={handleScan}
        onError={handleError}
        style={{ width: '100%' }}
      />
      <p>{data}</p>
    </>
  );
};

Props

Events

Prop Argument Description
onScan result Scan event handler. Called every scan with the decoded value or null if no QR code was found.
onError Error Called when an error occurs.
onLoad object Called when the component is ready for use. Object properties are stream: MediaStream

Options

Prop Type Default Description
facingMode user or environment environment Specify which camera should be used (if available).
resolution number 600 The resolution of the video (or image in legacyMode). Larger resolution will increase the accuracy but it will also slow down the processing time.
style a valid React style none Styling for the container element. Warning The preview will always keep its 1:1 aspect ratio.
className string none ClassName for the container element.
showViewFinder boolean true Show or hide the build in view finder. See demo
constraints object null Use custom camera constraints that the override default behavior. MediaTrackConstraints
debug boolean null Enable debug logs to see what's going on inside the component
viewFinderColor string 'rgba(255, 0, 0, 0.5)' Change viewFinder color for SVG Path
viewFinderStrokeWidth string '5' Change viewFinder width for SVG Path

Tested platforms

  • Chrome Mac OS & Android
  • Firefox Mac OS & Android
  • Safari Mac OS & IOS

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

Contributing

If you want to contribute to this project see contributing for more information.

License

Distributed under the MIT license. See LICENSE for more information.

Install

npm i @blackbox-vision/react-qr-reader

DownloadsWeekly Downloads

40

Version

0.3.1

License

MIT

Unpacked Size

124 kB

Total Files

23

Last publish

Collaborators

  • avatar
  • avatar