Qr-scanner-react NPM

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"`