@yudiel/react-qr-scanner
Advanced tools
@yudiel/react-qr-scanner - npm Package Compare versions
Comparing version 2.0.1 to 2.0.2
| { | ||
| "name": "@yudiel/react-qr-scanner", | ||
| "version": "2.0.1", | ||
| "version": "2.0.2", | ||
| "description": "A library to scan QR codes in React.", | ||
@@ -42,9 +42,9 @@ "author": "Yudiel Curbelo", | ||
| "@rollup/plugin-typescript": "^11.1.6", | ||
| "@storybook/addon-essentials": "^8.1.3", | ||
| "@storybook/addon-interactions": "^8.1.3", | ||
| "@storybook/addon-links": "^8.1.3", | ||
| "@storybook/addon-webpack5-compiler-swc": "1.0.2", | ||
| "@storybook/react": "^8.1.3", | ||
| "@storybook/react-webpack5": "^8.1.3", | ||
| "@types/node": "^20.12.12", | ||
| "@storybook/addon-essentials": "^8.1.5", | ||
| "@storybook/addon-interactions": "^8.1.5", | ||
| "@storybook/addon-links": "^8.1.5", | ||
| "@storybook/addon-webpack5-compiler-swc": "1.0.3", | ||
| "@storybook/react": "^8.1.5", | ||
| "@storybook/react-webpack5": "^8.1.5", | ||
| "@types/node": "^20.12.13", | ||
| "@types/react": "^18.3.3", | ||
@@ -55,8 +55,8 @@ "@types/react-dom": "^18.3.0", | ||
| "rollup-plugin-dts": "^6.1.1", | ||
| "storybook": "8.1.3", | ||
| "storybook": "8.1.5", | ||
| "typescript": "^5.4.5" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0" | ||
| "react": "^17 || ^18", | ||
| "react-dom": "^17 || ^18" | ||
| }, | ||
@@ -63,0 +63,0 @@ "dependencies": { |
@@ -11,5 +11,7 @@ ### Features | ||
| yarn add @yudiel/react-qr-scanner | ||
| ``` | ||
| yarn add @yudiel/react-qr-scanner | ||
| npm install @yudiel/react-qr-scanner | ||
| npm install @yudiel/react-qr-scanner | ||
| ``` | ||
@@ -46,6 +48,62 @@ ### Usage | ||
| ### Scanner Props | ||
| | Prop | Type | Required | Description | | ||
| |-----------------|-----------------------------------------------|----------|--------------------------------------------------------------------------| | ||
| | `onScan` | `(detectedCodes: IDetectedBarcode[]) => void` | Yes | Callback function that is called when one or more barcodes are detected. | | ||
| | `constraints` | `MediaTrackConstraints` | No | Optional media track constraints to apply to the video stream. | | ||
| | `formats` | `BarcodeFormat[]` | No | List of barcode formats to detect. | | ||
| | `paused` | `boolean` | No | If `true`, scanning is paused. | | ||
| | `torch` | `boolean` | No | If `true`, the device's torch (flashlight) is turned on, if available. | | ||
| | `children` | `ReactNode` | No | Optional children to render inside the scanner component. | | ||
| | `components` | `IScannerComponents` | No | Custom components to use within the scanner. | | ||
| | `styles` | `IScannerStyles` | No | Custom styles to apply to the scanner and its elements. | | ||
| | `allowMultiple` | `boolean` | No | If `true`, ignore same barcode being scanned. | | ||
| | `scanDelay` | `number` | No | Delay in milliseconds between scans. | | ||
| ### Limitations | ||
| - Due to browser implementations the camera can only be accessed over https or localhost. | ||
| - Due to browser implementations, the camera can only be accessed over https or localhost. | ||
| - Beep sound in iOS will only work after user interaction. | ||
| - Server side rendering won't work so only require the component when rendering in a browser environment. | ||
| - Server-side rendering won't work, so only require the component when rendering in a browser environment. | ||
| ### Types | ||
| #### `BarcodeFormat` | ||
| ```typescript | ||
| "aztec" | "code_128" | "code_39" | "code_93" | "codabar" | "databar" | "databar_expanded" | "data_matrix" | "dx_film_edge" | "ean_13" | "ean_8" | "itf" | "maxi_code" | "micro_qr_code" | "pdf417" | "qr_code" | "rm_qr_code" | "upc_a" | "upc_e" | "linear_codes" | "matrix_codes" | "unknown" | ||
| ``` | ||
| #### `IDetectedBarcode` | ||
| ```typescript | ||
| export interface IDetectedBarcode { | ||
| boundingBox: IBoundingBox; | ||
| cornerPoints: IPoint[]; | ||
| format: string; | ||
| rawValue: string; | ||
| } | ||
| ``` | ||
| #### `IScannerComponents` | ||
| ```typescript | ||
| export interface IScannerComponents { | ||
| tracker?: TrackFunction; | ||
| audio?: boolean; | ||
| onOff?: boolean; | ||
| finder?: boolean; | ||
| torch?: boolean; | ||
| } | ||
| ``` | ||
| #### `IScannerStyles` | ||
| ```typescript | ||
| export interface IScannerStyles { | ||
| container?: CSSProperties; | ||
| video?: CSSProperties; | ||
| finderBorder?: number; | ||
| } | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.94%
297757
- Number of lines in readme file
- increased by114%
107
No dependency changes