'use client'; import QRCode from 'qrcode'; import { useEffect, useRef } from 'react'; export function QRCodeImage({ value, size = 200 }: { value: string; size?: number }) { const canvasRef = useRef<HTMLCanvasElement>(null); useEffect(() => { if (canvasRef.current) { QRCode.toCanvas(canvasRef.current, value, { width: size, margin: 2 }); } }, [value, size]); return <canvas ref={canvasRef} />; }

QRコード生成

:LiTarget: 用途

URL・テキストからQRコード画像を生成。SVG出力可能。

:LiSparkle: 特徴

SVG/Canvas出力
ロゴ埋込み
色カスタマイズ
誤り訂正レベル指定

:LiCode: コード（コピペ用）

'use client';
import QRCode from 'qrcode';
import { useEffect, useRef } from 'react';

export function QRCodeImage({ value, size = 200 }: { value: string; size?: number }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    if (canvasRef.current) {
      QRCode.toCanvas(canvasRef.current, value, { width: size, margin: 2 });
    }
  }, [value, size]);
  return <canvas ref={canvasRef} />;
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

依存パッケージを忘れず追加