Browser version of the Awesome QR
npm install @qrcode-js/browserThis is the wrapper around the core package to provide support in browsers.
``html`
`html
`
Uses the useEffect hook to render only in browser context and not in SSR.
Also because SSR doesn't make much sense with canvas
`jsx
import { useRef } from "react";
import QRCodeBrowser from "@qrcode-js/browser";
export default function MyCanvas() {
const canvasRef = useRef();
useEffect(() => {
if (!canvasRef.current) return;
const myQR = QRCodeBrowser(canvasRef.current);
myQR.setOptions({
text: "https://github.com/qrcode-js/qrcode",
colorDark: "#123456",
size: 450,
dots: {
scale: 0.75,
round: 1,
},
finder: {
round: 0.5,
},
gradient: (ctx, size) => {
const gradient = ctx.createLinearGradient(0, 0, size, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "grey");
gradient.addColorStop(1, "red");
return gradient;
},
drawFunction: "telegram",
// drawFunction: (
// canvasContext,
// left,
// top,
// nSize,
// scale,
// round,
// parameters,
// otherCells
// ) => {
// if (parameters.isTiming) {
// QRCode.AwesomeQR._drawDot(canvasContext, left, top, nSize, scale, round);
// }
// },
});
myQR.draw();
}, [canvasRef]);
return ;
}
``