【React(TypeScript)】カメラを使ってQRコードを読み取る

概要

カメラを使ってQRコードを読み取るライブラリは複数あります。色々試した結果、現時点(2023/12時点)で一番良いと思ったライブラリとその使い方をマイベストプラクティスとして共有させていただきたいと思います。

やり方

ライブラリとして「react-xing」を使用します。コンパイル時にエラーが無く、コーディング量も非常に少なかったのでこのライブラリがお勧めです。

（他のライブラリは使い方が難しかったり、コンパイル時に参照ライブラリのバージョン問題と思われるエラーが発生して解消できませんでした。。）

ReadQRCode.tsx

これだけでカメラでQRコード読み取りができます。

import { useZxing } from 'react-zxing'

export const ReadQRCode = () => {
  const { ref } = useZxing({
    onDecodeResult(result) {
      const text = result.getText()
      console.log(text)
    },
  })

  return (
    <div>
      <video ref={ref} />
    </div>
  )
}

export default ReadQRCode