【React】 React で QRコードを読み取る
【React】 React で QRコードを読み取る
tags: node
react
はじめに
QRコードの読み取り以外の環境構築はこちら。
react-qr-reader をインストール
npm install --save react-qr-reader
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 オブジェクトを使用しています。
詳しくはこちらです。
実際にQRコードを読み取ってみる
QRコードの生成はこちらのサイトが便利でした。
タブから URL を選んで、URL を貼り付けするだけです。
結果の QRコード にリアルタイムで反映されていきます。
あとは起動してカメラで QRコード を読み取るだけです。
ありがとうございました。