[NextJS] QRCode Component

QRCode Component 를 만들 일이 있어서 Nextjs Typescript 용으로 하나 만들어 봤습니다.

사용된 라이브러리는 qrcode 이구요.

qrcode 설치

yarn add qrcode
yarn add @types/qrcode

component 소스

import { useEffect, useRef } from "react";
import QRCode from "qrcode";
import { NextPage } from "next";

interface QRCodeProps {
  value: string | QRCode.QRCodeSegment[];
  size: number;
}

const QRCodeComponent: NextPage<QRCodeProps> = ({ value, size }: QRCodeProps) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (canvasRef.current) {
      QRCode.toCanvas(canvasRef.current, value, { width: size }, (error) => {
        if (error) console.error(error);
      });
    }
  }, [value, size]);

  return <canvas ref={canvasRef} />;
};

export default QRCodeComponent;