DOCSEARCHbyAlgolia
Submit Docs

react-qr-code

repository·master·Indexed 21 days ago

https://github.com/rosskhanas/react-qr-code

A QR code generator for React and React Native (via react-native-svg) that supports UTF-8 encoding for non-ASCII characters. The library provides a QRCode component that allows customization of size, background and foreground colors, and error correction levels (L, M, Q, H).

Tokens
1.5K
Snippets
8
Records
9
Agent score
75%

What's inside react-qr-code

  1. Handle Non-ASCII / UTF-8 text

    master

    react-qr-code encodes data in UTF-8 byte mode. You can pass standard JavaScript strings containing non-ASCII characters (e.g., Korean, Japanese, or emojis) directly to the value prop without additional encoding.

    <QRCode value="한글 테스트 😊" />

  2. Ensure a quiet zone for QR codes

    master

    If the QR code is placed next to dark objects, wrap it in a light-colored container to preserve the required 'quiet zone' for scanning reliability.

    <div style={{ background: 'white', padding: '16px' }}>
  <QRCode ... />
</div

  4. Set the QR code error correction level

    master

    The level prop determines the error correction capability of the generated QR code. Higher levels allow the QR code to remain readable even if part of it is obscured or damaged. Use the following values:

    • "L": Low error correction (default)
    • "M": Medium error correction
    • "Q": Quartile error correction
    • "H": High error correction
    <QRCode value="some data" level="H" />

  5. Use the QRCode component

    master

    Import QRCode from react-qr-code and provide a value prop. The component renders a QR code based on the provided string.

    import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));

  6. Create a responsive QR code

    master

    To make the QR code responsive, wrap it in a container with a maxWidth and set the QRCode component's style and viewBox props to scale with the container.

    // Can be anything instead of `maxWidth` that limits the width.
<div style={{ height: "auto", margin: "0 auto", maxWidth: 64, width: "100%" }}>
  <QRCode
    size={256}
    style={{ height: "auto", maxWidth: "100%", width: "100%" }}
    value={value}
    viewBox={`0 0 256 256`}
  />
</div

  7. QRCode component API reference

    master

    The <QRCode /> component accepts the following props:

    proptypedefault valueplatform
    bgColorstring'#FFFFFF'web, ios, android
    fgColorstring'#000000'web, ios, android
    levelstring ('L' 'M' 'Q' 'H')'L'web, ios, android
    sizenumber256web, ios, android
    titlestringweb
    valuestringweb, ios, android

    Note: The component adheres to the official QR spec and can store up to 2953 characters in the value prop.

  8. Configure QRCodeProps

    master

    The QRCodeProps interface defines the customization options for the QRCode component. All props except value are optional.

    PropTypeDefaultDescription
    valuestringRequiredThe data to encode in the QR code.
    sizenumber128The width and height of the QR code in pixels.
    bgColorReact.CSSProperties["backgroundColor"]#FFFFFFThe background color of the QR code.
    fgColorReact.CSSProperties["color"]#000000The foreground (dots) color of the QR code.
    level"L" | "M" | "H" | "Q""L"The error correction level.
    titlestringNoneAn optional title for the SVG element.

    Note: Since QRCodeProps extends React.SVGProps<SVGSVGElement>, you can also pass any standard SVG attributes (like className, style, etc.) to the component.

    export interface QRCodeProps extends React.SVGProps<SVGSVGElement> {
    value: string;
    size?: number; // defaults to 128
    bgColor?: React.CSSProperties["backgroundColor"]; // defaults to "#FFFFFF"
    fgColor?: React.CSSProperties["color"]; // defaults to "#000000"
    level?: "L" | "M" | "H" | "Q"; // defaults to "L"
    title?: string;
}

  9. Configure QRCode component props

    master

    The QRCode component accepts the following props to customize the generated QR code:

    PropTypeDefaultDescription
    valuestringRequiredThe data to encode in the QR code.
    sizenumber256The width and height of the QR code in pixels.
    bgColorstring or object#FFFFFFThe background color.
    fgColorstring or object#000000The foreground (dots) color.
    levelstringLError correction level. Valid values are typically L, M, Q, or H.
    ...propsanyN/AAny other props passed to the underlying QRCodeSvg component.
    // Example of all available props
<QRCode
  value="Hello World"
  size={256}
  bgColor="#FFFFFF"
  fgColor="#000000"
  level="H"
/>