React で QRコード表示機能を実装

QRコードを表示する画面を作ったので、そのときのまとめです。
reactでQRコードを生成するライブラリは色々あったので、
hookの書き方に対応しているもので、
古めのコードリーダーでも比較的読み取り易いQRコードを生成してくるものを探しました。

検討したライブラリ

react-qrcodes
https://www.npmjs.com/package/react-qrcodes
導入もシンプルで古い機器での読み取りも問題なかったので今回はこれを使ってみることにしました。

react-qrbtf
https://www.npmjs.com/package/react-qrbtf
色を付けたり、コード部分を四角ではなく丸で表現できたり、楽しいのです。
（iPhoneのカメラでは読み取り可能でした）

実装

まずは、パッケージをインストール

npm i react-qrcodes

QRコードを表示する画面を作っていきます。

qrcode.js

import React from 'react';
import { useQRCode } from 'react-qrcodes';

function App() {
  const [inputRef] = useQRCode({
    text: 'https://qiita.com/hujuu',
    options: {
      level: 'H', //誤り訂正レベル
      margin: 3, //QRコードの周りの空白マージン
      scale: 1, 
      width: 200,
    },
  });

  return <canvas ref={inputRef} />;
};

export default App;

パラメータについて

誤り訂正レベル
誤り訂正レベルは、「どの程度の汚れまでに対応するか」を表しています。
スマホからQRコードを出そうと思ったので、画面のゴミや光の反射など考慮してhighにしてみました。

参考資料：https://www.qrcode.com/about/error_correction.html

マージン
QRコードはコードの周りに一定の空白区間がある程度必要です。
空白無く、他のテキストやデザインが描画されていると読み取れない場合があります。

参考資料：https://www.qrcode.com/howto/code.html

完成

react-qrcodesで生成したコードはこんな感じになりました。