QRコードは使い方次第で、URLであったり、WiFiの接続情報などの色々な情報を人に配布することができます。 今回は、qrcode.reactを使ってQRコードを生成・表示します。
qrcode.reactのリファレンス
qrcode.react#value
QRコードに変換されるテキストを設定します。 テキストの長さが23648を超えるとエラーが発生するので注意が必要です。
qrcode.react#renderAs
canvasかsvgのどちらでレンダリングするかを設定します。 デフォルトでは、canvasが選択されています。 svgの場合は、imageSettingsオブジェクト以下の設定値が適用されます。
qrcode.react#size
QRコードの一辺のサイズを指定します。 デフォルトでは、128が設定されています。
qrcode.react#bgColor
QRコードのバックグラウンドの色をRGBカラーで設定します。 デフォルトでは、白色(#FFFFFF)が設定されています。
qrcode.react#fgColor
QRコードのグリッドの色をRGBカラーで設定します。 デフォルトでは、黒色(#000000)が設定されています。
qrcode.react#level
誤り訂正レベルを設定します。
- L: シンボルに対する面積 7%
- M: シンボルに対する面積 15%
- Q: シンボルに対する面積 25%
- H: シンボルに対する面積 30%
qrcode.react#includeMargin
マージンを含むかどうかを設定します。
- true: sizeにマージンが含まれた状態でQRコードがレンダリングされます。
- false: sizeにマージンが含まれない状態でQRコードがレンダリングされます。 デフォルトでは、falseが設定されています。
qrcode.react#imageSettings
renderAsでsvgを指定した時に使われる設定値をオブジェクトで設定します。
qrcode.react#imageSettings.height
svgの高さを設定します。 デフォルトでは、sizeの10%の値が設定されます。
qrcode.react#imageSettings.width
svgの幅を設定します。 デフォルトでは、sizeの10%の値が設定されます。
qrcode.react#imageSettings.x
謎
qrcode.react#imageSettings.y
謎
qrcode.react#imageSettings.excavate
謎
qrcode.react#imageSettings.src
謎