@synotech/qrcode

QR code generator for React apps with many customization options.

Installation

npm install @synotech/qrcode

Or with Yarn:

yarn add @synotech/qrcode

Resources

• QrcodeCanvas: React component to render a QR code with <canvas>.
• QrcodeSVG: React component to render a QR code with <svg>.
• useQrcodeDownload: React hook to download the QR code in the browser.

Qrcode Props

| Prop | Type | Default | Details | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | value | string | | QR code payload (required) | | size | number | auto | Size of the QR code without margin and padding | | color | string { eyes: string, body: string } | '#000000' | Foreground color for the entire QR code or for each part (eyes and body) | | colorEffect | gradient-dark-vertical gradient-dark-horizontal gradient-dark-diagonal gradient-light-vertical gradient-light-horizontal gradient-light-diagonal colored shades none { eyes: colorEffect, body: colorEffect } | 'none' | Apply effects to coloring | | mode | Numeric Alphanumeric Byte Kanji | 'Byte' | Mode the payload (value) is encoded with | | level | L M Q H | 'M' | Error correction level | | modules | 0-40 | 0 | Number of QR code modules (0 = auto) | | image | string { src: string; width?: number; height?: number; positionX?: number; positionY?: number; overlap?: boolean; } | undefined | Settings for an image to insert into the QR code | | margin | number | 0 | Margin size. Area without background color | | padding | number | 0 | Padding size. Area with background color | | variant | standard rounded dots circle circle-full fluid reverse shower gravity morse italic inclined { eyes: variant, body: variant } | 'standard' | Style applied to the entire QR code or each part (eyes and body). circle-full is eye-only and renders each finder pattern as a single ring with a filled dot. | | divider | boolean | false | Small separation between QR code body points | | bgColor | string | '#FFFFFF' | Background color | | bgRounded | boolean | false | Rounded background | | internalProps | HTMLAttributes<HTMLCanvasElement \| SVGSVGElement> | undefined | Internal DOM attributes forwarded to the root element | | onReady | (element: HTMLCanvasElement \| SVGSVGElement) => void | undefined | Called with the element once rendered. Use with useQrcodeDownload. |

Code Example

import { QrcodeCanvas, useQrcodeDownload } from "@synotech/qrcode";

export function QrcodeCustom({ value = "@synotech/qrcode" }) {
  const [setQrcode, download, isReady] = useQrcodeDownload();

  return (
    <div>
      <QrcodeCanvas
        value={value}
        variant={{
          eyes: "circle-full",
          body: "fluid",
        }}
        color={{
          eyes: "#223344",
          body: "#335577",
        }}
        padding={20}
        margin={20}
        bgColor="#ddeeff"
        onReady={setQrcode}
        bgRounded
        divider
      />

      <button onClick={() => download("qrcode_file_name")} disabled={!isReady}>
        Download QR Code
      </button>
    </div>
  );
}

export default QrcodeCustom;

Visual playground

A Vite playground is included for local visual testing:

cd playground
yarn install
yarn dev

Author

• Zeal Murapa — Synoptic Technologies

License

This project is licensed under the MIT license — see the LICENSE file for details.