yudielcurbelo

@yudiel/react-qr-scanner

  "description": "A library to scan qr codes in react.",

    "url": "git+https://github.com/yudielcurbelo/react-qr-scanner.git"

    "url": "https://github.com/yudielcurbelo/react-qr-scanner/issues"

  "homepage": "https://github.com/yudielcurbelo/react-qr-scanner#readme",

    "build:cjs": "tsc --module CommonJS --outDir dist/cjs",

    "storybook": "NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",

    "build-storybook": "storybook build",

    "publish-beta": "npm publish --tag beta"

    "@babel/preset-typescript": "^7.23.3",

    "@rollup/plugin-commonjs": "^25.0.7",

    "@rollup/plugin-node-resolve": "^15.2.3",

    "@rollup/plugin-typescript": "^11.1.5",

    "@storybook/addon-actions": "^7.6.3",

    "@storybook/addon-essentials": "^7.6.3",

    "@storybook/addon-interactions": "^7.6.3",

    "@storybook/react-webpack5": "7.6.3",

    "rollup-plugin-peer-deps-external": "^2.2.4",

- Scan Qr Codes using a smartphone camera or webcam.

Checkout the [Demo](https://yudielcurbelo.github.io/react-qr-scanner/).

import {QrScanner} from '@yudiel/react-qr-scanner';

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

          onError={(error) => console.log(error?.message)}

| 1D product  | 1D industrial | 2D           |

|-------------|---------------|--------------|

| UPC-A       | Code 39       | QR Code      |

| EAN-8       | Code 128      | Data Matrix  |

| EAN-13      | RSS-14        | Aztec        |

|             |               | PDF 417      |

- Due to browser implementations the camera can only be accessed over https or localhost.

- Server side rendering won't work so only require the component when rendering in a browser environment.

|----------------|-------------------------------------------------------------------------------------------------|---------------------------------|-------------------------------------------------------------------|

| constraints    | [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) | `{ facingMode: 'environment' }` | Specify which camera should be used (if available).               |

import { useEffect, useState } from 'react';

import { defaultConstraints } from '../misc/defaultConstraints';

const useMediaDevicesHook = (constraints?: MediaTrackConstraints) => {

    const [state, setState] = useState<MediaTrackSettings[]>([]);

        let newConstraints: MediaStreamConstraints = {

            video: constraints ?? defaultConstraints

                .getUserMedia(newConstraints)

                    let settings: Array<MediaTrackSettings> = [];

                    mediaStream = stream;

                    stream.getVideoTracks().forEach((track) => {

                        settings.push(track.getSettings());

                .catch((error) => console.log(error));

        on(navigator.mediaDevices, 'devicechange', onChange);

            off(navigator.mediaDevices, 'devicechange', onChange);

            if(typeof mediaStream !== 'undefined') {

                mediaStream.getVideoTracks().forEach((track) => {

    const devices: MediaTrackSettings[] = [];

export const useMediaDevices = typeof navigator !== 'undefined' && !!navigator.mediaDevices ? useMediaDevicesHook : useMediaDevicesMock;

import { useEffect, useRef, useCallback, useState, useMemo } from 'react';

import { BrowserMultiFormatReader, DecodeContinuouslyCallback, DecodeHintType, NotFoundException } from '@zxing/library';

import deepEqual from '../utilities/deepEqual';

import { OnResultFunction, OnErrorFunction } from '../types';

export const useQrScanner = (props: IUseQrScannerProps) => {

    const { onResult, onError, scanDelay, hints, deviceId, stopDecoding } = props;

    const onResultRef = useRef(onResult);

    const videoRef = useRef<HTMLVideoElement>(null);

    const [constraints, setConstraints] = useState(props.constraints);

    const reader = useMemo(() => new BrowserMultiFormatReader(hints, scanDelay), []);

    const onDecode = useCallback<DecodeContinuouslyCallback>((result, error) => {

        if (result) onResultRef.current(result);

        if (error && !(error instanceof NotFoundException)) onErrorRef.current(error);

            if (error instanceof NotFoundException) {

            if (error instanceof DOMException && error.name === 'IndexSizeError') {

    const readerReset = useCallback(() => {

    const readerStop = useCallback(() => {

    const readerStart = useCallback(async () => {

                await reader.decodeFromVideoDevice(deviceId, videoRef.current, onDecode);

                let newConstraints: MediaStreamConstraints = {

                await reader.decodeFromConstraints(newConstraints, videoRef.current, onDecode);

            onErrorRef.current(error as Error);

    }, [reader, deviceId, constraints, onDecode]);

    }, [readerStart, readerReset, stopDecoding]);

        const isEqual = deepEqual(props.constraints, constraints);

            setConstraints(props.constraints);

    return { ref: videoRef, start: readerStart, stop: stopDecoding };

export class InsecureContextError extends Error {

        super('Camera access is only permitted in secure context. Use HTTPS or localhost.');

        this.name = 'InsecureContextError';

export class StreamApiNotSupportedError extends Error {

        super('This browser has no support for Stream API.');

        this.name = 'StreamApiNotSupportedError';

export const isStreamApiSupported = (): void => {

        throw new InsecureContextError();

    if (navigator?.mediaDevices?.getUserMedia === undefined) {

        throw new StreamApiNotSupportedError();

export type OnResultFunction = (result: Result) => void;

export type OnErrorFunction = (error: Error) => void;

import isObject from '../utilities/isObject';

import isDateObject from './isDateObject';

export default function deepEqual(object1: any, object2: any) {

    if (isPrimitive(object1) || isPrimitive(object2)) {

    if (isDateObject(object1) && isDateObject(object2)) {

        return object1.getTime() === object2.getTime();

                (isDateObject(val1) && isDateObject(val2)) ||

                (isObject(val1) && isObject(val2)) ||

                (Array.isArray(val1) && Array.isArray(val2))

                    ? !deepEqual(val1, val2)

import isNullOrUndefined from './isNullOrUndefined';

export const isObjectType = (value: unknown) => typeof value === 'object';

export default <T extends object>(value: unknown): value is T =>

import { isObjectType } from './isObject';

export default (value: unknown): value is Primitive =>

    isNullOrUndefined(value) || !isObjectType(value);

export default function off<T extends Window | Document | HTMLElement | EventTarget>(

    ...args: Parameters<T['removeEventListener']> | [string, Function | null, ...any]

    if (obj && obj.removeEventListener) {

        obj.removeEventListener(...(args as Parameters<HTMLElement['removeEventListener']>));

export default function on<T extends Window | Document | HTMLElement | EventTarget>(

    ...args: Parameters<T['addEventListener']> | [string, Function | null, ...any]

        obj.addEventListener(...(args as Parameters<HTMLElement['addEventListener']>));

		{
		"name": "@yudiel/react-qr-scanner",
		"version": "1.2.5",
		"version": "1.2.6",
		"description": "A library to scan qr codes in react.",
		@@ -64,3 +64,3 @@ "author": "Yudiel Curbelo",
		},
		"packageManager": "yarn@3.3.1"
		"packageManager": "yarn@4.0.2"
		}

		@@ -32,3 +32,14 @@ import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
		if (result) onResultRef.current(result);
		if (error && !(error instanceof NotFoundException)) onErrorRef.current(error);

		if (error) {
		if (error instanceof NotFoundException) {
		return;
		}

		if (error instanceof DOMException && error.name === 'IndexSizeError') {
		return;
		}

		onErrorRef.current(error);
		}
		}, []);
		@@ -42,3 +53,2 @@
		reader.stopAsyncDecode();
		reader.stopContinuousDecode();
		}, [reader]);
		@@ -77,3 +87,2 @@
		if (!isMounted.current) {
		readerStop();
		readerReset();
		@@ -80,0 +89,0 @@ }

Improved metrics

Worsened metrics

		export * from './components/QrScanner';
		export * from './hooks/useMediaDevices';