React

Implementation of the Qr grid library for React applications.

Installation

npm

npm install @qrgrid/react

bun

bun add @qrgrid/react

pnpm

pnpm install @qrgrid/react

yarn

yarn add @qrgrid/react

Using Canvas

import { Qr } from "@qrgrid/react/canvas";

<Qr input="Hello World!"/>

OR

import { Canvas } from "@qrgrid/react";

<Canvas.Qr input="Hello World!"/>

Props

Prop	Type	Description	Default
input	string	Data to encode
qrOptions?	QrOptions	Options for QR encoding
image?	QrImageOption	Image options for the image in QR code	sizePercent: 15 opacity: 1 overlap: true border: false
size?	number	Canvas size	400
watchKey?	string | number	Key to watch for regenerating the QR code (besides input, size, qrOptions and image).
bgColor?	QrColor | ((ctx: CanvasRenderingContext2D) => QrColor)	Background color	black
color?	QrColor | ((ctx: CanvasRenderingContext2D) => QrColor)	QR code color	white
moduleStyle?	ModuleStyleFunction	Custom styles for QR modules
getQrData?	(qr: QR) => void;	Retrieve QR data
getCanvasCtx?	(ctx: CanvasRenderingContext2D) => void;	Retrieve canvas context
onGenerated?	(ctx: CanvasRenderingContext2D, size: number, qr: QR) => void;	Callback once QR code is generated

see the props in code.

Using Svg

import { Svg } from "@qrgrid/react";

<Svg.Qr input="Hello World!"/>

OR

import { Qr } from "@qrgrid/react/svg";

<Qr input="Hello World!"/>

Props

Prop	Type	Description	Default
input	string	Data to encode
qrOptions?	QrOptions	Qr Options for QR encoding
image?	QrImageOption	Image options for image in the QR code	sizePercent: 15 opacity: 1 overlap: true border: false
size?	number	SVG size	400
watchKey?	string | number	Key to watch for regenerating the QR code (besides input, size, qrOptions and image).
bgColor?	string	Background color	black
color?	string | { codeword?: string; finder?: string }	QR code color	white
moduleStyle?	ModuleStyleFunction	Custom styles for QR modules
getQrData?	(qr: QR) => void;	get Qr data
onGenerated?	(path: ModuleStyleFunctionParams[0], size: number, qr: QR) => void;	Callback once QR code is generated

see the props in code.

Examples

Explore Styles for custom styling and other utilities

• Basic

  <Qr input="Hello World!" />

• ErrorCorrection

  <Qr input="Hello World!" qrOptions={{errorCorrection: 'H'}} />

• Color

  <Qr input="Hello World!" bgColor="#F8EDED" color="#173B45" />

• Module Style from @qrgrid/styles

  import { dotModuleStyle } from "@qrgrid/styles/canvas/styles";
  
  <Qr input="Hello World!" moduleStyle={dotModuleStyle} />

  import { smoothModuleStyle } from "@qrgrid/styles/canvas/styles";
  
  <Qr input="Hello World!" moduleStyle={smoothModuleStyle} />

• Images

  <Qr input="Hello World!" image={{ src: "./vite.svg" }} />

  <Qr input="Hello World!" image={{ src: "./vite.svg", overlap: false }} />

• Downloading using @qrgrid/styles

  Canvas

  import { Qr } from "@qrgrid/react/canvas";
  import { downloadQr } from "@qrgrid/styles/canvas/utils";
  
  const qrRef = useRef<HTMLCanvasElement | null>(null);
  
  const download = () => {
    if (qrRef.current) {
      downloadQr(qrRef.current);
    }
  };
  
  <Qr input="Hello World!" ref={qrRef} />

  Svg

  import { Qr } from "@qrgrid/react/svg";
  import { downloadQr} from "@qrgrid/styles/svg/utils";
  
  const qrRef = useRef<SVGSVGElement | null>(null);
  
  const download = () => {
    if (qrRef.current) {
      downloadQr(qrRef.current);
    }
  };
  
  <Qr input="Hello World!" ref={qrRef} />

For more examples and customization options, see the examples.