@ar-identification/react v0.2.1

@ar-identification/react

An scanner for Argentinian DNI's.

Installation

yarn add @zxing/browser@^0.1.1 @zxing/library@^0.19.1 @ar-identification/decode@0.1.1 @ar-identification/react@0.2.1

Usage/Examples

The library includes a component called Scanner which scans only the front of the DNI at the moment. Also has the ability to read and validate QR codes.

Props

The DNI Object

Implementation

import React, { useState } from "react";
import { DNI } from "@ar-identification/decode";
import { Scanner, ScannerProps } from "@ar-identification/react";

const App = () => {
  const [dni, setDni] = useState<DNI>();
  const [error, setError] = useState<string>();
  const [qr, setQR] = useState<string>();
  const handleOnScanError = (e: Error) => setError(e.message);

  const handleRetry = () => {
    setError(undefined);
    setDni(undefined);
    setQR(undefined);
  };

  const handleSuccess: ScannerProps["onScanSuccess"] = ({ type, data }) => {
    if (type === "DNI") {
      setDni(data as DNI);
    } else {
      setQR(data as string);
    }
  };

  const qrValidator = async (data: string) => {
    try {
      const parsedJSON = JSON.parse(data) as any;
      return !!parsedJSON.test;
    } catch (e) {
      console.log(e);
      return false;
    }
  };

  return (
    <div>
      {error && <p>{error}</p>}
      {dni && <pre style={{ fontFamily: "monospace" }}>{JSON.stringify(dni, null, 2)}</pre>}
      {qr && <pre style={{ fontFamily: "monospace" }}>{JSON.stringify(JSON.parse(qr), null, 2)}</pre>}
      {!dni && !error && !qr && (
        <Scanner onScanSuccess={handleSuccess} onScanError={handleOnScanError} allowQR QRValidationFn={qrValidator} />
      )}
      {(error || dni || qr) && <button onClick={handleRetry}>Retry</button>}
    </div>
  );
};

export default App;