useQRCode

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

Install

npm i qrcode@^1

Usage

即時編輯器

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

結果

Loading...

API

UseQRCode

Returns

UseQRCodeReturn

Arguments

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

UseQRCodeReturn

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