🐥

React+TypeScriptなWebアプリで、QRコード読み込みしてみる。(zxingで)

2023/12/14に公開

Abstract

React+TypescriptでQRコードを読み込む話をなるだけ簡素に。
"出来たよ!!"って記事は出てくるのに、React+Typescriptでってなると全然出てこなくって。
前に、jsQRライブラリで実装したんだけど、認識が弱かったので、zxingで再トライ。

結論

今回の成果物はココ↓
https://github.com/aaaa1597/react-qrcode-zxing

前提

手順

1.プロジェクト生成 -> VSCodeで開く

めんどいから、プロジェクト雛形をgithubから持ってくる。React+TypeScriptのプロジェクト雛形をgithubに置いとく話。

2.生成したプロジェクトの場所でreact-zxingをインストール

$ cd プロジェクトのフォルダ
$ npm install
$ npm install react-zxing --save

3.App.tsxを修正

App.tsx
import React from 'react';
import './App.css';
+import { useState } from "react";
+import { useZxing } from "react-zxing";

function App() {
+ const [result, setResult] = useState("");
+ const { ref } = useZxing({
+   onDecodeResult(result) {
+     setResult(result.getText());
+   },
+ });
  
  return (
    <div className="App">
-      hello world!!
+     <video ref={ref} />
+     <p>
+       <span>Last result:</span>
+       <span>{result}</span>
+     </p>
    </div>
  );
}

export default App;


で実行。


出来た!!
めっちゃ簡単。
感度も悪くない。
zxing、スゴ!!

https://github.com/adamalfredsson/react-zxing

Discussion