---
title: "useQRCode 用法與示例"
description: "`useQRCode` 是一個用於生成二維碼的 Hook。"
canonical: https://reactuse.com/zh-Hant/integrations/useqrcode/
---

# useQRCode

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

## Install

```shell
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

```tsx live 
// 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>
  );
}
```

%%API%%