qr-code-styling
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.0-rc.1 • Public • Published

    QR Code Styling

    Version

    JavaScript library for generating QR codes with a logo and styling.

    Try it here https://qr-code-styling.com

    If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.

    Examples

    Installation

    npm install qr-code-styling
    

    Usage

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>QR Code Styling</title>
        <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
    </head>
    <body>
    <div id="canvas"></div>
    <script type="text/javascript">
    
        const qrCode = new QRCodeStyling({
            width: 300,
            height: 300,
            type: "svg",
            data: "https://www.facebook.com/",
            image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
            dotsOptions: {
                color: "#4267b2",
                type: "rounded"
            },
            backgroundOptions: {
                color: "#e9ebee",
            },
            imageOptions: {
                crossOrigin: "anonymous",
                margin: 20
            }
        });
    
        qrCode.append(document.getElementById("canvas"));
        qrCode.download({ name: "qr", extension: "svg" });
    </script>
    </body>
    </html>

    React example (Codesandbox)

    Angular example (Codesandbox)


    React example (source)

    Angular example (source)

    Vue example (source)


    API Documentation

    QRCodeStyling instance

    new QRCodeStyling(options) => QRCodeStyling

    Param Type Description
    options object Init object

    options structure

    Property Type Default Value Description
    width number 300 Size of canvas
    height number 300 Size of canvas
    type string ('canvas' 'svg') canvas The type of the element that will be rendered
    data string The date will be encoded to the QR code
    image string The image will be copied to the center of the QR code
    margin number 0 Margin around canvas
    qrOptions object Options will be passed to qrcode-generator lib
    imageOptions object Specific image options, details see below
    dotsOptions object Dots styling options
    cornersSquareOptions object Square in the corners styling options
    cornersDotOptionsHelper object Dots in the corners styling options
    backgroundOptions object QR background styling options

    options.qrOptions structure

    Property Type Default Value
    typeNumber number (0 - 40) 0
    mode string ('Numeric' 'Alphanumeric' 'Byte' 'Kanji')
    errorCorrectionLevel string ('L' 'M' 'Q' 'H') 'Q'

    options.imageOptions structure

    Property Type Default Value Description
    hideBackgroundDots boolean true Hide all dots covered by the image
    imageSize number 0.4 Coefficient of the image size. Not recommended to use ove 0.5. Lower is better
    margin number 0 Margin of the image in px
    crossOrigin string('anonymous' 'use-credentials') Set "anonymous" if you want to download QR code from other origins.

    options.dotsOptions structure

    Property Type Default Value Description
    color string '#000' Color of QR dots
    gradient object Gradient of QR dots
    type string ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded') 'square' Style of QR dots

    options.backgroundOptions structure

    Property Type Default Value
    color string '#fff'
    gradient object

    options.cornersSquareOptions structure

    Property Type Default Value Description
    color string Color of Corners Square
    gradient object Gradient of Corners Square
    type string ('dot' 'square' 'extra-rounded') Style of Corners Square

    options.cornersDotOptions structure

    Property Type Default Value Description
    color string Color of Corners Dot
    gradient object Gradient of Corners Dot
    type string ('dot' 'square') Style of Corners Dot

    Gradient structure

    options.dotsOptions.gradient

    options.backgroundOptions.gradient

    options.cornersSquareOptions.gradient

    options.cornersDotOptions.gradient

    Property Type Default Value Description
    type string ('linear' 'radial') "linear" Type of gradient spread
    rotation number 0 Rotation of gradient in radians (Math.PI === 180 degrees)
    colorStops array of objects Gradient colors. Example [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]

    Gradient colorStops structure

    options.dotsOptions.gradient.colorStops[]

    options.backgroundOptions.gradient.colorStops[]

    options.cornersSquareOptions.gradient.colorStops[]

    options.cornersDotOptions.gradient.colorStops[]

    Property Type Default Value Description
    offset number (0 - 1) Position of color in gradient range
    color string Color of stop in gradient range

    QRCodeStyling methods

    QRCodeStyling.append(container) => void

    Param Type Description
    container DOM element This container will be used for appending of the QR code

    QRCodeStyling.getRawData(extension) => Promise<Blob>

    Param Type Default Value Description
    extension string ('png' 'jpeg' 'webp' 'svg') 'png' Blob type

    QRCodeStyling.update(options) => void

    Param Type Description
    options object The same options as for initialization

    QRCodeStyling.applyExtension(extension) => void

    Param Type Description
    extension (svg, options) => void Extension is a function that takes svg and previously applied options and modifies an svg

    applyExtension example

    const extension = (svg, options) => {
        const { width, height } = options;
        const size = Math.min(width, height);
        const border = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        const borderAttributes = {
            "fill": "none",
            "x": (width - size + 40) / 2,
            "y": (height - size + 40) / 2,
            "width": size - 40,
            "height": size - 40,
            "stroke": 'black',
            "stroke-width": 40,
            "rx": 100,
        };
        Object.keys(borderAttributes).forEach(attribute => {
          border.setAttribute(attribute, borderAttributes[attribute]);
        });
        svg.appendChild(border);
    };

    QRCodeStyling.deleteExtension() => void

    QRCodeStyling.download(downloadOptions) => Promise<void>

    Param Type Description
    downloadOptions object Options with extension and name of file (not required)

    downloadOptions structure

    Property Type Default Value Description
    name string 'qr' Name of the downloaded file
    extension string ('png' 'jpeg' 'webp' 'svg') 'png' File extension

    License

    MIT License. Copyright (c) 2021 Denys Kozak

    Dependents (6)

    Install

    npm i qr-code-styling

    DownloadsWeekly Downloads

    5,952

    Version

    1.6.0-rc.1

    License

    MIT

    Unpacked Size

    262 kB

    Total Files

    29

    Last publish

    Collaborators

    • denys_kozak