1. React QR Reader

Attention!!!!

This repository and library is fork from here https://github.com/JodusNodus/react-qr-reader

Table of contents

• 1. Use Case
• 2. Compatibility
• 3. Installation
  • 3.1. NPM
  • 3.2. YARN
• 4. Example Usage
• 5. Component API
• 6. Maintainers
• 7. Browser Support

1. Use Case

You need a component for Scanning QR codes from a web browser based app.

2. 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 >= 18.2.0.

3. Installation

You can install this library via NPM or YARN.

3.1. NPM

npm i react-qr-reader

3.2. YARN

yarn add react-qr-reader

4. 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 'react-qr-reader';

const Test = () => {
  const [error, setError] = useState('');
  const [data, setData] = useState('');

  return (
    <div style={styles.container}>
      <QrReader
        {...args}
        onResult={(result, error) => {
          if (result) {
            setData(result.getText());
          }

          if (error) {
            setError(error.message);
          }
        }}
      />
      <p>The value is: {JSON.stringify(data, null, 2)}</p>
      <p>The error is: {error}</p>
    </div>
  );
};

5. Component API

The QrReader component has the following props:

6. Maintainers

• Current Maintainers @memenashi

• Original Author @JodusNodus

7. Browser Support

If you need to support older browsers, checkout this guide in how to make it compatible with legacy ones