Day 19 - 建立 canvas QRCode

前述

今天因为时间不足 T_T ....
所以教大家使用 qrcode.react ，可以很快速的产生 QRCode!

qrcode.react

qrcode.react

import "./styles.css";
import QRCode from "qrcode.react";
import { useState } from "react";
import ColorControl from "./ColorControl";

export default function App() {
  const [size, setSize] = useState(100);
  const [bgColor, setBgColor] = useState("#FFF");
  return (
    <div className="App">
      <div>
        <QRCode
          value="http://facebook.github.io/react/"
          size={size}
          bgColor={bgColor}
        />
      </div>

      <div className="md:flex md:items-center mb-6">
        <div className="md:flex md:items-center mb-6">
          <div className="md:w-1/3">
            <label
              className="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4"
              htmlFor="size"
            >
              尺寸
            </label>
          </div>
          <div className="md:w-2/3">
            <input
              id="size"
              onChange={(e) => setSize(parseInt(e.target.value, 10))}
              type="range"
              max={500}
              min={100}
              value={70}
              className="range range-accent"
            />
          </div>
        </div>
      </div>
      <ColorControl name="bgColor" handleOnChange={setBgColor} />
    </div>
  );
}

除了应用了 qrcode.react，还应用了 react-color 修改颜色，进入连结看更多的使用。

codesendbox