Zenn
📷

ReactでQRコードを生成してみた

2024/10/22に公開
Next.js
React
QR コード
tech

はじめに

qrcode.reactというライブラリを使ってReactでQRコードを生成しました
Next.jsでTailwindでスタイリングしています

qrcode.react

https://www.npmjs.com/package/qrcode.react

ライブラリをインストール

npm install qrcode.react

インポートして使う

QRCodeSVGもしくはQRCodeCanvasをインポートすることで簡単に使えます
どちらを使っても良さそうなので、今回自分はSVGの方を使いました

最低限で使う↓

import { QRCodeSVG } from 'qrcode.react';

export const QRCode = () => {
    return (
        <QRCodeSVG value="https://react.dev/" />
    )
}

実際に取り入れてみた

自分がこれを取り入れるときは、元々divタグでQRコードを入れる部分を用意していたのでそこに追加しました

<div className="aspect-square max-w-[450px] lg:w-[450px] bg-neutral-100 rounded-lg">
    <QRCodeSVG
        value={`https://react.dev/`}
    />
</div>

大きさや位置を調整します
QRCodeSVGにsizeというpropを渡す方法もありますが、今回はdivタグが可変なのでそれに合わせたいのでTailwindでスタイリングします

<div className="aspect-square max-w-[450px] lg:w-[450px] bg-neutral-100 rounded-lg">
    <QRCodeSVG
        value={`https://react.dev/`}
        className="w-full h-full p-6"
    />
</div>

QRコードの背景色は真っ白で、divタグと微妙に色が違いますね
bgColorというpropsでQRコードの背景色を指定できます

<div className="aspect-square max-w-[450px] lg:w-[450px] bg-neutral-100 rounded-lg">
    <QRCodeSVG
        value={`https://react.dev/`}
        className="w-full h-full p-6"
        bgColor="#f5f5f5"
    />
</div>

ちなみにfgColorでQRコード自体の色も変えられるみたいです

実際に取り入れたのはここまでですが、他にも色々できるみたいなので、試していきます！

QRコードの見た目をカスタマイズしてみた

imageSettingsというオブジェクトをpropsで指定できるので、imageを追加してみます！
とりあえずNext.jsのセットアップ時に入っているfavicon.icoを使います

それに合わせて、Next.jsのサイトに使われている青色にしてみました

<div className="aspect-square max-w-[450px] lg:w-[450px] bg-neutral-100 rounded-lg">
    <QRCodeSVG
      value={`https://nextjs.org/`}
      className="w-full h-full p-6"
      fgColor="#0057ff"
      imageSettings={{
        src: "/favicon.ico",
        x: undefined,
        y: undefined,
        height: 24,
        width: 24,
        excavate: true,
      }}
    />
</div>

imageSettingsのxとyにundefinedを入れるとimageが中央に配置されます
試しに x:1, y:1 のようにしてみたところ、QRコードの角の四角に被ってしまったので、使えないものになってしまいました笑

まあ中央以外にimageを置くことはそうそうないと思いますが…笑

まとめ

Reactで簡単にQRコードを生成できるqrcode.reactを使ってみました
実際に取り入れたのはシンプルなものですが、見た目のカスタマイズも色々できて面白かったです！

紹介しきれていないpropsなどは参考にしたこちらの記事に詳しくまとめられてます
https://zenn.dev/hayato94087/articles/fdb9fb357a22c3

Discussion