@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
prop | type signature | description |
---|---|---|
onScanSuccess |
(event: SuccessEvent) => void |
callback triggered on a successful scan |
onScanError |
(error: Error) => void |
callback triggered on any error |
className |
string | undefined |
an optional string containing css classes |
allowQR |
boolean |
an optional boolean to allow QR codes reading |
QRValidationFn |
(data:string) => Promise<boolean> |
an optional async fn to validate the QR data |
The DNI Object
prop | type signature | description |
---|---|---|
name |
string |
Nombre / Name |
surname |
string |
Apellido / Surname |
dateOfBirth |
Date |
Fecha de nacimiento / Date of birth |
dateOfIssue |
Date |
Fecha de emisión / Date of issue |
dateOfExpiry |
Date |
Fecha de vencimiento / Date of expiry |
copy |
string |
Ejemplar |
sex |
"MALE" | "FEMALE" | "NON_BINARY" |
Sexo / Sex |
dni |
string |
Documento / Document |
cuil |
string |
CUIL |
id |
string |
Tramite N° / Of. Ident |
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;