Nekonote

Nekonote(ねこのて)もかりたい

【React】 React で QRコードを読み取る

このエントリーをはてなブックマークに追加

【React】 React で QRコードを読み取る

tags: node react

はじめに

QRコードの読み取り以外の環境構築はこちら。

h-s-hige.hateblo.jp


react-qr-reader をインストール

npm install --save react-qr-reader

react-qr-readerのgithubはこちらです。

github.com


react-qr-reader の使い方

QRコードを読み取って、QRコードが指すURLに遷移してみます。

import React, { Component } from 'react';
import QrReader from 'react-qr-reader';

export default class WorkQr extends Component {

  handleScan = (data) => {
    const {
      history,
    } = this.props;

    if (data) {
      history.push(data);
    }
  }

  handleError = (err) => {
    console.error(err);
  }

  render() {
    return (
      <QrReader
        delay={1000}
        onError={this.handleError}
        onScan={this.handleScan}
        style={{ width: '100%' }}
      />
    );
  }
}

今回は、ページ遷移に React Router の history オブジェクトを使用しています。

詳しくはこちらです。

reacttraining.com


実際にQRコードを読み取ってみる

QRコードの生成はこちらのサイトが便利でした。

www.the-qrcode-generator.com

タブから URL を選んで、URL を貼り付けするだけです。
結果の QRコード にリアルタイムで反映されていきます。

あとは起動してカメラで QRコード を読み取るだけです。


ありがとうございました。

おすすめ 記事