ReactでQRコードの生成を行う方法

ReactでQRコードの生成を行う方法

ReactでQRコードを生成するには、qrcode.reactというライブラリを使うのが便利です。

まず、ライブラリをインストールする必要があります。
以下のコマンドを使用してください。

npm install qrcode.react

yarn add qrcode.react

次に、TypeScriptでの実装例です。

import React from 'react';
import QRCode from 'qrcode.react';

const QRCodeComponent: React.FC = () => {
  return (
    <div>
      <h1>QRコードの生成</h1>
      <QRCode value="https://example.com" />
    </div>
  );
};

export default QRCodeComponent;

この例では、QRCodeコンポーネントを使ってQRコードを生成しています。
valueプロパティにQRコードに変換したい文字列（この例ではURL）を指定します。