An improved QR code scanner for React.
npm install qr-scanner-react``bash`
npm install --save qr-scanner-react
Without props
`ts`
With props
`ts`
Type
`ts`
{
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. |
An object used to configure the appearance of the view finder.
Type
`ts`
{
visible: boolean | undefined;
outerColor: string | undefined;
strokeWidth: string | undefined;
strokeColor: string | undefined;
radius: string | undefined;
strokeLength: string | undefined;
custom: React.ReactElement
}
Explanation
| Attribute | Description | Default | Examples |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------------- |
| visible | Whether the view finder should be visible. | false | visible : true |#00000000
| outerColor | Background color outside the scanning region. | | outerColor: "black" outerColor: "#FFFFFFAA", |3px
| strokeWidth | Width of the lines constituting the view finder. | | strokeWidth: "10px" strokeWidth: "1.2em" |#000000
| strokeColor | Color of the lines constituting the view finder. | | strokeColor: "black" strokeColor: "#FFFFFFAA" |5px
| radius | Radius of the corners of the view finder. | | radius: "10px" radius: "1.2em" radius: "15%" |40px
| strokeLength | Length of the lines constituting the view finder. | | strokeLength: "100px" strokeLength: "1.2em" strokeLength: "55%" |undefined
| 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. | | custom : |
A function called when a QR code is read.
Type
`ts`
(result: ScanResult) => void
ScanResult
`ts`
{
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
`ts`
(result) => {
console.log(result);
};
A function called when an error occurred or a QR Code cannot be read.
Type
`ts`
(error: Error | string) => void;
Default
`ts`
(error) => {
console.log(error);
};
An object used to configure the CSS of the rendered elements.
Type
`ts`
{
video: CSSProperties | undefined;
videoContainer: CSSProperties | undefined;
container: CSSProperties | undefined;
}
An object used to configure the scanning behavior.
Type
`ts`
{
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" |5
| maxScansPerSecond | Limit the number of scans made a second. | |"environment"` |
| cameraPreference | Which camera should be used, if there are multiple camera options. |
MIT © jakub-ucinski