Wondering what’s next for npm?Check out our public roadmap! »

    react-qr-svg
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    Node.js CI npm version Commitizen friendly semantic-release

    react-qr-svg

    React component for rendering SVG QR codes

    Demo

    Basic demo can be found at the demo page.

    Why SVG?

    Most of the existing React components for QR (namely qrcode.react, which was used as a starting point for this project) use <canvas> for rendering.

    This is fine for most scenarios, however when trying to print such code, it gets blurry. This is caused by the fact that <canvas> contents get rastered and then scaled in the process resulting in the blurriness.

    On the other hand, SVG retains the vector information of its contents and therefore is scaled properly when printed.

    Basic Usage

    Install using npm:

    npm install react-qr-svg --save

    Then use in your application like this:

    import React from "react";
    import { QRCode } from "react-qr-svg";
     
    class Demo extends React.Component {
        render() {
            return (
                <QRCode
                    bgColor="#FFFFFF"
                    fgColor="#000000"
                    level="Q"
                    style={{ width: 256 }}
                    value="some text"
                />
            );
        }
    }

    Props

    The props available are (shown with default values):

    {
        value: '', // The value to encode in the code
        level: 'L', // QR Error correction level
        bgColor: '#FFFFFF', // Color of the bright squares
        fgColor: '#000000', // Color of the dark squares
        cellClassPrefix: '', // Prefix of the CSS classes, if specified, bgColor and fgColor are ignored
    }

    The level prop corresponds to Error correction level so the valid values are L, M, Q and H.

    You can also specify all the props that are valid for the <svg> React element (e.g. style, className or width which you can use to specify the size of the QR code).

    CSS styling

    You can use CSS to set the QR code colors instead of the bgColor and fgColor props. You just need to specify the cellClassPrefix prop and three CSS classes will become available for you to style.

    Let's say you used my-qr-code as the cellClassPrefix. The generated classes are:

    • my-qr-code-cell for all the cells
    • my-qr-code-cell-empty for the empty cells
    • my-qr-code-cell-filled for the filled cells

    You can then set the colors using the fill CSS property. See CSS Demo for an example.

    Note: If you specify cellClassPrefix, bgColor and fgColor values are ignored.

    Acknowledgements

    This project is heavily inspired by the qrcode.react project.

    This project uses the react-component-boilerplate.

    License

    react-qr-svg is available under MIT. See LICENSE for more details.

    Install

    npm i react-qr-svg

    DownloadsWeekly Downloads

    18,046

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar