🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-qr-scanner-aakash

Package Overview
Dependencies
Maintainers
0
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-qr-scanner-aakash

A library to scan QR codes in React.

2.0.11
latest
Source
npm
Version published
Weekly downloads
2
-66.67%
Maintainers
0
Weekly downloads
 
Created
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 onScan={(result) => console.log(result)} />
}
  • There is also a hook to get the available devices useDevices.

Supported Formats

1D Barcodes2D Barcodes
CodabarAztec
Code 39Data Matrix
Code 93Matrix Codes
Code 128Maxi Code
DatabarMicro QR Code
Databar ExpandedPDF 417
Dx Film EdgeQR Code
EAN 8rMQR Code
EAN 13
ITF
Linear Codes
UPC A
UPC E

Scanner Props

PropTypeRequiredDescription
onScan(detectedCodes: IDetectedBarcode[]) => voidYesCallback function that is called when one or more barcodes are detected.
constraintsMediaTrackConstraintsNoOptional media track constraints to apply to the video stream.
formatsBarcodeFormat[]NoList of barcode formats to detect.
pausedbooleanNoIf true, scanning is paused.
childrenReactNodeNoOptional children to render inside the scanner component.
componentsIScannerComponentsNoCustom components to use within the scanner.
stylesIScannerStylesNoCustom styles to apply to the scanner and its elements.
classNamesIScannerClassNamesNoCustom classNames to apply to the scanner and its elements.
allowMultiplebooleanNoIf true, ignore same barcode being scanned.
scanDelaynumberNoDelay in milliseconds between scans.

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.

Types

BarcodeFormat

"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

export interface IDetectedBarcode {
    boundingBox: IBoundingBox;
    cornerPoints: IPoint[];
    format: string;
    rawValue: string;
}

IScannerComponents

export interface IScannerComponents {
    tracker?: TrackFunction;
    audio?: boolean;
    onOff?: boolean;
    torch?: boolean;
    zoom?: boolean;
    finder?: boolean;
}

IScannerStyles

export interface IScannerStyles {
    container?: CSSProperties;
    video?: CSSProperties;
    finderBorder?: number;
}

Keywords

react

FAQs

Package last updated on 24 Jul 2024

Did you know?

Socket

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