@blackbox-vision/react-qr-reader
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    Lib logo

    React QR Reader npm version License: MIT Known Vulnerabilities

    🚀 React QR Reader component. Check out the demo.

    Table of contents

    Use Case

    You need a component for Scanning QR codes 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.

    Installation

    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

    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 React, { useState } from 'react';
    import { QrReader } from '@blackbox-vision/react-qr-reader';
    
    const Test = (props) => {
      const [data, setData] = useState('No result');
    
      return (
        <>
          <QrReader
            onResult={(result, error) => {
              if (!!result) {
                setData(result?.text);
              }
    
              if (!!error) {
                console.info(error);
              }
            }}
            style={{ width: '100%' }}
          />
          <p>{data}</p>
        </>
      );
    };

    Component API

    The QrReader component has the following props:

    Properties Types Default Value Description
    constraints MediaTrackConstraints { facingMode: 'user' } Specify which camera should be used (if available).
    onResult function none Scan event handler
    videoId string video The ID for the video element
    scanDelay number 500 The scan period for the QR hook
    ViewFinder component none ViewFinder component to rendering over the video element
    className string none ClassName for the container element.
    containerStyle object none Style object for the container element.
    videoContainerStyle object none Style object for the video container element.
    videoStyle object none Style object for the video element.

    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.

    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

    1,056

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    37.2 kB

    Total Files

    19

    Last publish

    Collaborators

    • jonatansalas
    • manutuero