はじめに

---

react-qr-readerを以前使っていて，かなり重用していたのだが，どうも３年以上メンテナンスされていないようで，過去の React に対する peerDep が設定されており，force install しなくてはならないようだった．

force install しても動作は確認できており，問題なく使える．しかし，QR コードリーダは今後も使う機会が多いと予想される点と，できるだけ force install は避けたいという点から，自分で QR コードリーダのライブラリを React Hooks を用いながら開発した．

そして，ある程度汎用性の高い機能のため，自分だけで保持するのも勿体なく感じたため，npm に公開した．

パッケージの紹介

---

リンク

---

https://www.npmjs.com/packagereact-qrcode-reader

インストール

---

$ npm install react-qrcode-reader

サンプル

---

1. コールバック関数を自分で作る場合

コールバックを自分で作るパターンだが，コールバックにはstringではなくjsqrのQRCode型が渡されるので，注意が必要．

import React from 'react';

import QrCodeReader, { QRCode } from 'react-qrcode-reader';

const App: React.FC = () => {
  const [val, setVal] = React.useState<string>('');

  const handleRead = (code: QRCode) => {
    setVal(code.data);
  };

  return (
    <>
      <QrCodeReader delay={100} width={500} height={500} onRead={handleRead} />
      <p>{val}</p>
    </>
  );
};

export default App;

2. セッターをコールバックとする

基本的に QR コードリーダを使う場合はシンプルなセッターをコールバックにすることが多いので，セッターを受ける Prop も作ってみた．

コールバックには，読み込まれた文字列を引数として呼ばれる．

例えば，console.logをactionに渡した場合，ログ出力がされる．

import React from 'react';

import QrCodeReader, { QRCode } from 'react-qrcode-reader';

const App: React.FC = () => {
  const [val, setVal] = React.useState<string>('');

  return (
    <>
      <QrCodeReader delay={100} width={600} height={500} action={setVal} />
      <p>{val}</p>
    </>
  );
};

export default App;

API

---

正直，onReadとactionの名前はあまり意味を考えずに決めたので，「そういうもの！」として扱ってほしい．..

おわりに

---

いやぁー，npm パッケージ開発は楽しいですねぇ！

参考

---

• https://github.com/JodusNodus/react-qr-reader/blob/masterpackage.json