React.jsでQRコード生成

  • 8
    Like
  • 0
    Comment

はじめに

概要 : qrcode.reactパッケージを用いて、reactでQRコードを生成するスクリプトを組みます。コード数行で実装できるので、ReactでQRコードを生成する必要がある場合は是非試してみてください。

今回のサンプルコード : https://github.com/OdaDaisuke/React-QRCode
今回書いたコードのデモ

簡単なサンプル

$ npm i qrcode.react
/src/index.js
import React, { Component } from "react"
import ReactDOM from "react-dom"
import QRCode from "qrcode.react"

const App = React.createClass({

  render() {
    return (
      <div>
        <QRCode value="https://google.com" />
      </div>
    )
  }

})

ReactDOM.render(
   <App />,
  document.getElementById('root')
)
/public/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="d/styles/style.css">
  <title>QR code by React</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

実行してみましょう。

$ npm i react react-dom react-scripts
$ npm start

するとこういうQRコードが出てくると思います。
生成されたQRコード
スマホのQRコードリーダーで読み取ってみて
https://google.comにアクセスできれば完璧です。

終わりに

qrcode.react - https://github.com/zpao/qrcode.react
今回のサンプルコード - https://github.com/OdaDaisuke/React-QRCode
今回書いたコードのデモ