@yudiel/react-qr-scanner - npm Package Compare versions

Comparing version 1.2.10 to 2.0.0-beta.1

dist/cjs/components/Counter.d.ts

 import React from 'react';
-interface CounterProps {
-    scanCount: number;
+import { Result } from '@zxing/library';
+interface ICounterProps {
+    result?: Result;
 }
-declare const Counter: (props: CounterProps) => React.JSX.Element;
-export default Counter;
+export default function Counter(props: ICounterProps): React.JSX.Element;
+export {};

dist/cjs/components/Finder.d.ts

 import React from 'react';
 import { Result } from '@zxing/library';
-interface FinderProps {
-    scanCount: number;
-    hideCount: boolean;
-    tracker: boolean;
+import { IBrowserScannerOptions } from '../types';
+interface IFinderProps {
+    enabled: boolean;
+    loading: boolean;
+    video: HTMLVideoElement | null;
     border?: number;
     result?: Result;
-    video: HTMLVideoElement | null;
-    constraints?: MediaTrackConstraints;
-    deviceId?: string;
-    scanDelay: number;
+    options: IBrowserScannerOptions;
+    count?: boolean;
+    onOff?: boolean;
+    tracker?: boolean;
+    switchTorch?: (value: boolean) => void;
+    startScanning: (deviceId?: string | undefined) => void;
+    stopScanning: () => void;
+    getSettings?: () => MediaTrackSettings | undefined;
 }
-export declare const Finder: (props: FinderProps) => React.JSX.Element;
+export default function Finder(props: IFinderProps): React.JSX.Element;
 export {};

dist/cjs/components/Tracker.d.ts

 import React from 'react';
 import { Result } from '@zxing/library';
-interface TrackerProps {
+interface ITrackerProps {
     result?: Result;
     video: HTMLVideoElement | null;
-    constraints?: MediaTrackConstraints;
-    deviceId?: string;
-    scanDelay: number;
+    delay: number;
+    getSettings?: () => MediaTrackSettings | undefined;
 }
-declare const Tracker: (props: TrackerProps) => React.JSX.Element;
-export default Tracker;
+export default function Tracker(props: ITrackerProps): React.JSX.Element;
+export {};

dist/cjs/index.d.ts

@@ -1,2 +0,3 @@
-export * from './components/QrScanner';
-export * from './hooks/useMediaDevices';
+export * from './components/Scanner';
+export * from './hooks/useDeviceList';
+export * from './hooks/useContinuousScanner';

dist/cjs/misc/index.d.ts

@@ -1,7 +0,4 @@
-export declare class InsecureContextError extends Error {
-    constructor();
-}
-export declare class StreamApiNotSupportedError extends Error {
-    constructor();
-}
-export declare const isStreamApiSupported: () => void;
+export { defaultOptions } from './defaultOptions';
+export { defaultConstraints } from './defaultConstraints';
+export { defaultComponents } from './defaultComponents';
+export { defaultStyles } from './defaultStyles';

dist/cjs/types/index.d.ts

@@ -1,4 +0,6 @@
-import { Result } from '@zxing/library';
-export type OnResultFunction = (result: Result) => void;
-export type OnErrorFunction = (error: Error) => void;
-export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+export { default as OnResultFunction } from './OnResult';
+export { default as OnErrorFunction } from './OnError';
+export { default as IScannerControl } from './IScannerControls';
+export { default as IBrowserScannerOptions } from './IScannerOptions';
+export { default as IScannerComponents } from './IScannerComponents';
+export { default as IScannerStyles } from './IScannerStyles';

dist/cjs/utilities/isPrimitive.d.ts

@@ -1,3 +0,3 @@
-import { Primitive } from '../types';
+import { Primitive } from './Primitive';
 declare const _default: (value: unknown) => value is Primitive;
 export default _default;

dist/esm/components/Counter.d.ts

 import React from 'react';
-interface CounterProps {
-    scanCount: number;
+import { Result } from '@zxing/library';
+interface ICounterProps {
+    result?: Result;
 }
-declare const Counter: (props: CounterProps) => React.JSX.Element;
-export default Counter;
+export default function Counter(props: ICounterProps): React.JSX.Element;
+export {};

dist/esm/components/Finder.d.ts

 import React from 'react';
 import { Result } from '@zxing/library';
-interface FinderProps {
-    scanCount: number;
-    hideCount: boolean;
-    tracker: boolean;
+import { IBrowserScannerOptions } from '../types';
+interface IFinderProps {
+    enabled: boolean;
+    loading: boolean;
+    video: HTMLVideoElement | null;
     border?: number;
     result?: Result;
-    video: HTMLVideoElement | null;
-    constraints?: MediaTrackConstraints;
-    deviceId?: string;
-    scanDelay: number;
+    options: IBrowserScannerOptions;
+    count?: boolean;
+    onOff?: boolean;
+    tracker?: boolean;
+    switchTorch?: (value: boolean) => void;
+    startScanning: (deviceId?: string | undefined) => void;
+    stopScanning: () => void;
+    getSettings?: () => MediaTrackSettings | undefined;
 }
-export declare const Finder: (props: FinderProps) => React.JSX.Element;
+export default function Finder(props: IFinderProps): React.JSX.Element;
 export {};

dist/esm/components/Tracker.d.ts

 import React from 'react';
 import { Result } from '@zxing/library';
-interface TrackerProps {
+interface ITrackerProps {
     result?: Result;
     video: HTMLVideoElement | null;
-    constraints?: MediaTrackConstraints;
-    deviceId?: string;
-    scanDelay: number;
+    delay: number;
+    getSettings?: () => MediaTrackSettings | undefined;
 }
-declare const Tracker: (props: TrackerProps) => React.JSX.Element;
-export default Tracker;
+export default function Tracker(props: ITrackerProps): React.JSX.Element;
+export {};

dist/esm/index.d.ts

@@ -1,2 +0,3 @@
-export * from './components/QrScanner';
-export * from './hooks/useMediaDevices';
+export * from './components/Scanner';
+export * from './hooks/useDeviceList';
+export * from './hooks/useContinuousScanner';

dist/esm/misc/index.d.ts

@@ -1,7 +0,4 @@
-export declare class InsecureContextError extends Error {
-    constructor();
-}
-export declare class StreamApiNotSupportedError extends Error {
-    constructor();
-}
-export declare const isStreamApiSupported: () => void;
+export { defaultOptions } from './defaultOptions';
+export { defaultConstraints } from './defaultConstraints';
+export { defaultComponents } from './defaultComponents';
+export { defaultStyles } from './defaultStyles';

dist/esm/types/index.d.ts

@@ -1,4 +0,6 @@
-import { Result } from '@zxing/library';
-export type OnResultFunction = (result: Result) => void;
-export type OnErrorFunction = (error: Error) => void;
-export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+export { default as OnResultFunction } from './OnResult';
+export { default as OnErrorFunction } from './OnError';
+export { default as IScannerControl } from './IScannerControls';
+export { default as IBrowserScannerOptions } from './IScannerOptions';
+export { default as IScannerComponents } from './IScannerComponents';
+export { default as IScannerStyles } from './IScannerStyles';

dist/esm/utilities/isPrimitive.d.ts

@@ -1,3 +0,3 @@
-import { Primitive } from '../types';
+import { Primitive } from './Primitive';
 declare const _default: (value: unknown) => value is Primitive;
 export default _default;

dist/index.d.ts

@@ -1,28 +0,59 @@
-import React, { CSSProperties, ReactElement } from 'react';
+import React, { CSSProperties, RefObject } from 'react';
 import { Result, DecodeHintType } from '@zxing/library';
 
-type OnResultFunction = (result: Result) => void;
-type OnErrorFunction = (error: Error) => void;
+type OnResult = (result: Result) => void;
 
-interface IQrScannerProps {
-    onError?: OnErrorFunction;
-    onResult?: OnResultFunction;
-    containerStyle?: CSSProperties;
-    videoStyle?: CSSProperties;
-    onDecode?: (result: string) => void;
-    viewFinder?: (props: any) => ReactElement | null;
-    hideCount?: boolean;
-    tracker?: boolean;
-    viewFinderBorder?: number;
-    constraints?: MediaTrackConstraints;
-    scanDelay?: number;
+type OnError = (error: Error) => void;
+
+interface IScannerOptions {
     deviceId?: string;
     hints?: Map<DecodeHintType, any>;
-    stopDecoding?: boolean;
+    constraints?: MediaTrackConstraints;
+    delayBetweenScanSuccess?: number;
+    delayBetweenScanAttempts?: number;
+    tryPlayVideoTimeout?: number;
+}
+
+interface IScannerComponents {
+    tracker?: boolean;
     audio?: boolean;
+    torch?: boolean;
+    count?: boolean;
+    onOff?: boolean;
 }
-declare const QrScanner: (props: IQrScannerProps) => React.JSX.Element;
 
-declare const useMediaDevices: (constraints?: MediaTrackConstraints) => MediaTrackSettings[];
+interface IScannerStyles {
+    container?: CSSProperties;
+    video?: CSSProperties;
+    finderBorder?: number;
+}
 
-export { type IQrScannerProps, QrScanner, useMediaDevices };
+interface IScannerProps {
+    onResult: (text: string, result: Result) => void;
+    onError?: (error: Error) => void;
+    enabled?: boolean;
+    styles?: IScannerStyles;
+    options?: IScannerOptions;
+    components?: IScannerComponents;
+}
+declare const Scanner: (props: IScannerProps) => React.JSX.Element;
+
+declare function useDeviceList(): MediaDeviceInfo[];
+
+interface IUseContinuousScannerProps {
+    onResult: OnResult;
+    onError: OnError;
+    options: IScannerOptions;
+    audio: boolean;
+}
+interface IUseContinuousScannerReturn {
+    ref: RefObject<HTMLVideoElement>;
+    startScanning: () => void;
+    stopScanning: () => void;
+    loading: boolean;
+    switchTorch?: (value: boolean) => void;
+    getSettings?: () => MediaTrackSettings | undefined;
+}
+declare function useContinuousScanner(props: IUseContinuousScannerProps): IUseContinuousScannerReturn;
+
+export { type IScannerProps, Scanner, useContinuousScanner, useDeviceList };

package.json

 {
   "name": "@yudiel/react-qr-scanner",
-  "version": "1.2.10",
+  "version": "2.0.0-beta.1",
   "description": "A library to scan qr codes in react.",
@@ -31,3 +31,3 @@ "author": "Yudiel Curbelo",
   "devDependencies": {
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
@@ -38,10 +38,10 @@ "@babel/preset-typescript": "^7.23.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-actions": "^7.6.16",
-    "@storybook/addon-essentials": "^7.6.16",
-    "@storybook/addon-interactions": "^7.6.16",
-    "@storybook/addon-links": "^7.6.16",
-    "@storybook/react": "^7.6.16",
-    "@storybook/react-webpack5": "7.6.16",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "7.6.17",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
@@ -55,3 +55,3 @@ "react": "^18.2.0",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "7.6.16",
+    "storybook": "7.6.17",
     "tslib": "^2.6.2",
@@ -61,4 +61,4 @@ "typescript": "^5.3.3"
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
@@ -65,0 +65,0 @@ "dependencies": {

README.md

 ### Features
 
-- Scan Qr Codes using a smartphone camera or webcam.
+- Scan codes using a smartphone camera or webcam.
 
 ### Demo
+
 Checkout the [Demo](https://yudielcurbelo.github.io/react-qr-scanner/).
@@ -17,40 +18,83 @@
 ```jsx
-import {QrScanner} from '@yudiel/react-qr-scanner';
+import { Scanner } from '@yudiel/react-qr-scanner';
 
 const App = () => {
-  return (
-      <QrScanner
-          onDecode={(result) => console.log(result)}
-          onError={(error) => console.log(error?.message)}
-      />
-  );
+    return (
+        <Scanner
+            onResult={(text, result) => console.log(text, result)}
+            onError={(error) => console.log(error?.message)}
+        />
+    );
 }
 ```
 
+- You can also import `useContinuousScanner` hook and implement your own UI.
+- There is also a hook to get the available devices `useDeviceList`.
+
 ### Supported Formats
 
-| 1D product  | 1D industrial | 2D           |
-|-------------|---------------|--------------|
-| UPC-A       | Code 39       | QR Code      |
-| EAN-8       | Code 128      | Data Matrix  |
-| EAN-13      | RSS-14        | Aztec        |
-|             |               | PDF 417      |
+- This library uses the [zxing-js](https://github.com/zxing-js/library) to decode the scanned codes.
 
+| 1D product | 1D industrial | 2D          |
+|------------|---------------|-------------|
+| UPC-A      | Code 39       | QR Code     |
+| UPC-E      | Code 93       | Data Matrix |
+| EAN-8      | Code 128      | Aztec       |
+| EAN-13     | Codabar       | PDF 417     |
+|            | ITF           |             |
+|            | RSS-14        |             |
+|            | RSS-Expanded  |             |
+
 ### Limitations
+
 - 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.
 
 ### API
-| Properties     | Types                                                                                           | Default Value                   | Description                                                       |
-|----------------|-------------------------------------------------------------------------------------------------|---------------------------------|-------------------------------------------------------------------|
-| constraints    | [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) | `{ facingMode: 'environment' }` | Specify which camera should be used (if available).               |
-| containerStyle | `object`                                                                                        | none                            | Style object for the container element.                           |
-| videoStyle     | `object`                                                                                        | none                            | Style object for the video element.                               |
-| scanDelay      | `number`                                                                                        | `500`                           | The scan period for the QR hook.                                  |
-| videoId        | `string`                                                                                        | `videoId`                       | The Id for the video element.                                     |
-| onResult       | `function`                                                                                      | none                            | Scan event handler for result object.                             |
-| onDecode       | `function`                                                                                      | none                            | Scan event handler for decode value.                              |
-| onError        | `function`                                                                                      | none                            | Scan event handler for error object.                              |
-| ViewFinder     | `component`                                                                                     | none                            | ViewFinder component to rendering as overlay in the video element |
-| hideCount      | `boolean`                                                                                       | `true`                          | Hide the scanned count as overlay in the video element            |
-| stopDecoding   | `boolean`                                                                                       | `false`                         | Stop the decoding process                                         |
+
+| Property   | Type                                     | Description                                                        | Required |
+|------------|------------------------------------------|--------------------------------------------------------------------|----------|
+| onResult   | `(text: string, result: Result) => void` | Callback function that is called with the scanned text and result. | Yes      |
+| onError    | `(error: Error) => void`                 | Optional callback function that is called when an error occurs.    | No       |
+| enabled    | `boolean`                                | Optional flag to enable or disable the scanner.                    | No       |
+| styles     | `IScannerStyles`                         | Optional styles to apply to the scanner and its components.        | No       |
+| options    | `IScannerOptions`                        | Optional configuration options for the browser scanner.            | No       |
+| components | `IScannerComponents`                     | Optional components to include or exclude in the scanner.          | No       |
+
+### Error Interface
+
+| Property | Type     | Description                        |
+|----------|----------|------------------------------------|
+| name     | `string` | The name of the error.             |
+| message  | `string` | The error message.                 |
+| stack    | `string` | Optional stack trace of the error. |
+
+### IScannerStyles Interface
+
+| Property     | Type            | Description                                | Required |
+|--------------|-----------------|--------------------------------------------|----------|
+| container    | `CSSProperties` | Optional styles for the scanner container. | No       |
+| video        | `CSSProperties` | Optional styles for the video element.     | No       |
+| finderBorder | number          | Optional border size for the finder.       | No       |
+
+### IScannerOptions Interface
+
+| Property                 | Type                                                                                                       | Description                                    | Required | Default     |
+|--------------------------|------------------------------------------------------------------------------------------------------------|------------------------------------------------|----------|-------------|
+| deviceId                 | `string`                                                                                                   | Optional ID of the device to use for scanning. | No       | `undefined` |
+| hints                    | `Map<`[DecodeHintType](https://zxing.github.io/zxing/apidocs/com/google/zxing/DecodeHintType.html)`, any>` | Optional hints to fine-tune scanning.          | No       | `undefined` |
+| constraints              | [DecodeHintType](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints)                   | Optional constraints for the media track.      | No       | `{...}`     |
+| delayBetweenScanSuccess  | `number`                                                                                                   | Optional delay between successful scans.       | No       | `500`       |
+| delayBetweenScanAttempts | `number`                                                                                                   | Optional delay between scan attempts.          | No       | `500`       |
+| tryPlayVideoTimeout      | `number`                                                                                                   | Optional timeout for trying to play the video. | No       | `500`       |
+
+### IScannerComponents Interface
+
+| Property | Type      | Description                                | Required | Default |
+|----------|-----------|--------------------------------------------|----------|---------|
+| audio    | `boolean` | Optional inclusion of an audio component.  | No       | `true`  |
+| torch    | `boolean` | Optional inclusion of a torch component.   | No       | `true`  |
+| count    | `boolean` | Optional inclusion of a count component.   | No       | `false` |
+| onOff    | `boolean` | Optional inclusion of an on/off component. | No       | `false` |
+| tracker  | `boolean` | Optional inclusion of a tracker component. | No       | `false` |

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5077572

increased by4.62%

Number of package files

93

increased by116.28%

Lines of code

4495

increased by37.46%

Number of lines in readme file

100

increased by78.57%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

4

increased byInfinity%

No dependency changes