Docs
Getting Start

Quick Start

import React from 'react'
import { BarcodeScanner } from 'react-barcode-scanner'
import 'react-barcode-scanner/polyfill'
 
export default () => {
  return (
    <BarcodeScanner />
  )
}

Barcode format

BarcodeScanner support qr_code format by default, if needed to support other formats, use config formats option:

<BarcodeScanner options={{ formats: ['code_128'] }} />
⚠️

Project based on Barcode Detection API, Support Barcode Formats (opens in a new tab) except aztec, data_matrix and pdf417 (zbar polyfill not supported)

Scanning delay

For performance consider BarcodeScanner set default 1000ms to scan barcode, if need more sensitive, use config delay option:

<BarcodeScanner options={{ delay: 500 }} />

Torch

To consider more scenarios, BarcodeScanner abstract useTorch hook for ease of use

import React from 'react'
import { BarcodeScanner, useTorch } from 'react-barcode-scanner'
 
export default () => {
  const { isTorchSupported, isTorchOn, setIsTorchOn } = useTorch()
 
  const onTorchSwitch = () => {
    setIsTorchOn(!isTorchOn)
  }
 
  return (
    <div style={{ width: '100%', height: '360px' }}>
      <BarcodeScanner />
      {isTorchSupported
        ? <button onClick={onTorchSwitch}>Switch Torch</button>
        : null}
    </div>
  )
}

Currently, torch only work in some browser, see detail: MediaTrackConstraints (opens in a new tab)

With framework

Next.js

React Barcode Scanner is based on browser Barcode Detection API library, it's only suitable for browser environment; so if want to use it in Next.js, user need use next/dynamic to import library

import dynamic from 'next/dynamic'
 
const BarcodeScanner = dynamic(() => {
  import('react-barcode-scanner/polyfill')
  return import('react-barcode-scanner').then(mod => mod.BarcodeScanner)
}, { ssr: false })
InstallAPI