useQRCode

useQRCode 是一個用於生成二維碼的 Hook。

Install

npm i qrcode@^1

useQRCode 為給定的文字或 URL 生成 QR 碼。它回傳一個 QR 碼的資料 URL（data URL）字串，可直接用作 <img> 元素的 src。支援自訂 QR 碼的大小、顏色、糾錯級別和邊距等選項。

使用場景

為 URL、文字或聯絡資訊動態生成 QR 碼
建構允許使用者以 QR 碼形式分享連結的功能
在發票、票證或名片上嵌入可掃描的 QR 碼

注意事項

相依套件：需要安裝 qrcode 套件作為對等依賴。
資料 URL：回傳的是 base64 編碼的資料 URL，可直接用作圖片來源。
選項：支援透過 qrcode 函式庫的完整選項，包括糾錯級別（L、M、Q、H）、寬度和色彩設定。

Usage

Live Editor

// import { useQRCode } from "@reactuses/core/useQRCode";

function Demo() {
  const [text, setText] = useState("https://reactuse.com/");
  const { qrCode, error } = useQRCode(text);

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="輸入文本以生成二維碼"
      />
      <br />
      <br />
      {error && <div style={{ color: "red" }}>{error}</div>}
      {qrCode && <img src={qrCode} alt="二維碼" />}
    </div>
  );
}

Result

API

UseQRCode

Returns

UseQRCodeReturn

Arguments

參數名	描述	類型	預設值
text	文本	string (必填)	-
options	传递给 `QRCode.toDataURL` 的选项	QRCodeToDataURLOptions \| undefined	-

UseQRCodeReturn

參數名	描述	類型	預設值
qrCode	生成的二维码	string (必填)	`-`
error	错误	unknown (必填)	`-`