qr-scanner-react

Install

npm install --save qr-scanner-react

Usage

Without props

<QrScanner />

With props

<QrScanner {...props} />

Props

Type

{
  viewFinderConfig: ViewFinderConfig | undefined;
  onResult: ResultHandler | undefined;
  onError: ErrorHandler | undefined;
  styles: QrScannerStyles | undefined;
  scanConfig: ScanConfig | undefined;
  'full-width': boolean | undefined;
}

| Prop | Description | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | viewFinderConfig | Configure the appearance of the viewFinder. | | onResult | Called when a QR code is read. | | onError | Called when an error occurred or a QR Code cannot be read. | | styles | Configure the CSS of the rendered elements. | | scanConfig | Configure the scanning behavior. | | full-width | A boolean describing whether the camera should be cropped to square, or not. By default, full-width is false, and so it is cropped to a square. |

viewFinderConfig

An object used to configure the appearance of the view finder.

Type

{
  visible: boolean | undefined;
  outerColor: string | undefined;
  strokeWidth: string | undefined;
  strokeColor: string | undefined;
  radius: string | undefined;
  strokeLength: string | undefined;
  custom: React.ReactElement<undefined> | undefined;
}

Explanation

| Attribute | Description | Default | Examples | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------------- | | visible | Whether the view finder should be visible. | false | visible : true | | outerColor | Background color outside the scanning region. | #00000000 | outerColor: "black" outerColor: "#FFFFFFAA", | | strokeWidth | Width of the lines constituting the view finder. | 3px | strokeWidth: "10px" strokeWidth: "1.2em" | | strokeColor | Color of the lines constituting the view finder. | #000000 | strokeColor: "black" strokeColor: "#FFFFFFAA" | | radius | Radius of the corners of the view finder. | 5px | radius: "10px" radius: "1.2em" radius: "15%" | | strokeLength | Length of the lines constituting the view finder. | 40px | strokeLength: "100px" strokeLength: "1.2em" strokeLength: "55%" | | custom | Instead of using the built-in view finder with the customizations, you can provide your own, in which case, your view finder will be used. | undefined | custom : <CustomViewFinder /> |

onResult

A function called when a QR code is read.

Type

(result: ScanResult) => void

ScanResult

{
  data: string;
  cornerPoints: ({ x: number; y: number; }[]);
}

| Attribute | Description | | ------------ | --------------------------------------------------- | | data | The data read from the QR code. | | cornerPoints | The location of the corners of the QR code scanned. |

Default

(result) => {
  console.log(result);
};

onError

A function called when an error occurred or a QR Code cannot be read.

Type

(error: Error | string) => void;

Default

(error) => {
  console.log(error);
};

styles

An object used to configure the CSS of the rendered elements.

Type

{
  video: CSSProperties | undefined;
  videoContainer: CSSProperties | undefined;
  container: CSSProperties | undefined;
}

scanConfig

An object used to configure the scanning behavior.

Type

{
  qrColor: 'dark' | 'light' | 'both' | undefined;
  maxScansPerSecond: number | undefined;
  cameraPreference: 'environment' | 'user' | DeviceId: string | undefined;
}

Explanation

| Attribute | Description | Default | | ----------------- | ------------------------------------------------------------------ | --------------- | | qrColor | The colors of the QR codes that should be scanned. | "both" | | maxScansPerSecond | Limit the number of scans made a second. | 5 | | cameraPreference | Which camera should be used, if there are multiple camera options. | "environment" |

License

MIT © jakub-ucinski