Socket
Socket
Sign inDemoInstall

@yudiel/react-qr-scanner

Package Overview
Dependencies
8
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@yudiel/react-qr-scanner

A library to scan qr codes in react.


Version published
Maintainers
1
Weekly downloads
8,303
decreased by-5.41%

Weekly downloads

Readme

Source

Features

  • Scan codes using a smartphone camera or webcam.

Demo

Checkout the Demo.

Install

yarn add @yudiel/react-qr-scanner

npm install @yudiel/react-qr-scanner

Usage

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

const App = () => {
    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

  • This library uses the zxing-js to decode the scanned codes.
1D product1D industrial2D
UPC-ACode 39QR Code
UPC-ECode 93Data Matrix
EAN-8Code 128Aztec
EAN-13CodabarPDF 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

PropertyTypeDescriptionRequired
onResult(text: string, result: Result) => voidCallback function that is called with the scanned text and result.Yes
onError(error: Error) => voidOptional callback function that is called when an error occurs.No
enabledbooleanOptional flag to enable or disable the scanner.No
stylesIScannerStylesOptional styles to apply to the scanner and its components.No
optionsIScannerOptionsOptional configuration options for the browser scanner.No
componentsIScannerComponentsOptional components to include or exclude in the scanner.No

IUseContinuousScannerReturn Interface

PropertyTypeDescription
refRefObject<HTMLVideoElement>A reference to the video element used for scanning.
startScanning() => voidA function to initiate the scanning process.
stopScanning() => voidA function to stop the scanning process.
loadingbooleanIndicates whether the scanner is in the process of initializing.
scanningbooleanIndicates whether the scanner is currently active and scanning.
switchTorch(value: boolean) => void | undefinedAn optional function to toggle the device's torch (flashlight) feature.
getSettings() => MediaTrackSettings | undefinedAn optional function to get the current settings of the media track.

Error Interface

PropertyTypeDescription
namestringThe name of the error.
messagestringThe error message.
stackstringOptional stack trace of the error.

IScannerStyles Interface

PropertyTypeDescriptionRequired
containerCSSPropertiesOptional styles for the scanner container.No
videoCSSPropertiesOptional styles for the video element.No
finderBordernumberOptional border size for the finder.No

IScannerOptions Interface

PropertyTypeDescriptionRequiredDefault
deviceIdstringOptional ID of the device to use for scanning.Noundefined
hintsMap<DecodeHintType, any>Optional hints to fine-tune scanning.Noundefined
constraintsDecodeHintTypeOptional constraints for the media track.No{...}
delayBetweenScanSuccessnumberOptional delay between successful scans.No500
delayBetweenScanAttemptsnumberOptional delay between scan attempts.No500
tryPlayVideoTimeoutnumberOptional timeout for trying to play the video.No500

IScannerComponents Interface

PropertyTypeDescriptionRequiredDefault
audiobooleanOptional inclusion of an audio component.Notrue
torchbooleanOptional inclusion of a torch component.Notrue
countbooleanOptional inclusion of a count component.Nofalse
onOffbooleanOptional inclusion of an on/off component.Nofalse
trackerbooleanOptional inclusion of a tracker component.Nofalse

FAQs

Last updated on 06 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc