qr code

Create Custom QR Code Component

As per Wikipedia
https://en.wikipedia.org/wiki/QR_code

QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan.
A QR code consists of black squares arranged in a square grid on a white background, which can be read by an imaging device such as a camera.


You can find QR Code Styling npm package here.

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

Install Package:

npm i qr-code-styling

https://www.npmjs.com/package/qr-code-styling


๐Ÿ’ป Required Imports:

import QRCodeStyling from "qr-code-styling";
import React, { useEffect, useRef } from "react";

๐Ÿ’ป Let’s Create an Object of QrCodeStyling

// Below is QR Code stying object with default attributes
// We can also pass these all attributes as a props for different
// different uses, colors and data

const qrCode = new QRCodeStyling({
  width: 250,
  height: 250,
  margin: 10,
  image: "",
  dotsOptions: {
    color: "white",
    type: "rounded",
  },
  imageOptions: {
    crossOrigin: "anonymous",
    margin: 10,
  },
  backgroundOptions: {
    color: "yellow",
  },
  cornersSquareOptions: {
    color: "black",
  },
});


๐Ÿ’ก Below are all available properties that we can set within Object.

PropertyTypeDefault ValueDescription
widthnumber300Size of canvas
heightnumber300Size of canvas
datastringThe date will be encoded to the QR code
imagestringThe image will be copied to the center of the QR code
marginnumber0Margin around canvas
qrOptionsobjectOptions will be passed to qrcode-generator lib
imageOptionsobjectSpecific image options, details see below
dotsOptionsobjectDots styling options
cornersSquareOptionsobjectSquare in the corners styling options
cornersDotOptionsHelperobjectDots in the corners styling options
backgroundOptionsobjectQR background styling options


๐Ÿ’ก HTML part to render Canvas only of QR Code

  return <div ref={ref}></div>; 


๐Ÿ’ก HTML part with Canvas and Outer Div with Title and Dynamic Styles

// This is outer div which have some dynamic styles based on props, you can remove this div if you dont need any parent div.
    <div
      style={{
        backgroundColor: props.bgColor && props.bgColor,
        display: "inline-block",
      }}
    >
      {/* Below div is most important, where canvas will be rendered of QR code*/}
      <div ref={ref}></div>

      {/* Below title is optional, if you dont need it you can remove this one. */}
      <p style={{ color: props.titleColor || "white", textAlign: "center" }}>
        {props.title || "JS Mount"}
      </p>
    </div>


๐Ÿ’ก Let’s see useEffect hook to add props in exist QrCodeStyling object.

useEffect(() => {
    // get options and set props values into this
    const options = qrCode._options;
    options.cornersSquareOptions.color = props.eyeColor;
    options.image = props.centerImageSrc;
    options.backgroundOptions.color = props.bgColor;
    options.dotsOptions.color = props.fgColor;

    qrCode.append(ref.current);
  }, []);


๐Ÿ’ก Set main data into QrCodeStyling using useEffect

 useEffect(() => {
    qrCode.update({
      data: props.data,
    });
  }, [props.data]);

Complete Code

import QRCodeStyling from "qr-code-styling";
import React, { useEffect, useRef } from "react";

// Below is QR Code stying object with default attributes
// We can also pass these all attributes as a props for different different uses, colors and data
const qrCode = new QRCodeStyling({
  width: 250,
  height: 250,
  margin: 10,
  image: "",
  dotsOptions: {
    color: "white",
    type: "rounded",
  },
  imageOptions: {
    crossOrigin: "anonymous",
    margin: 10,
  },
  backgroundOptions: {
    color: "yellow",
  },
  cornersSquareOptions: {
    color: "black",
  },
});

export default function QrCodeStylingComponent(props) {
  const ref = useRef(null);

  useEffect(() => {
    const options = qrCode._options;
    options.cornersSquareOptions.color = props.eyeColor;
    options.image = props.centerImageSrc;
    options.backgroundOptions.color = props.bgColor;
    options.dotsOptions.color = props.fgColor;
    qrCode.append(ref.current);
  }, []);

  useEffect(() => {
    qrCode.update({
      data: props.data,
    });
  }, [props.data]);

  return (
    // This is outer div which have some dynamic styles based on props, you can remove this div if you dont need any parent div.
    <div
      style={{
        backgroundColor: props.bgColor && props.bgColor,
        display: "inline-block",
      }}
    >
      {/* Below div is most important, where canvas will be rendered of QR code*/}
      <div ref={ref}></div>

      {/* Below title is optional, if you dont need it you can remove this one. */}
      <p style={{ color: props.titleColor || "white", textAlign: "center" }}>
        {props.title || "JS Mount"}
      </p>
    </div>
  );
}

โœ‹ Use of Above Component by passing props

  <div>
            <QrCodeStylingComponent
              data="https://jsmount.com"
              bgColor="black"
              fgColor="white"
              eyeColor="green"
              titleColor="white"
              title="QrCodeStyling JS Mount"
              centerImageSrc="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg"
            ></QrCodeStylingComponent>
          </div>


๐Ÿ’ก HTML AND CSS

โœ” HTML Form with Pure CSS & JavaScript | Custom Radio and Checkbox

โœ” Top 40 Awesome CSS Interview Questions & Answers You should know | CSS Tutorial

โœ” HTML advance Interview Questions and Answers for Experienced โ€“ Part 1


๐Ÿ’ก DATA STRUCTURE & ALGORITHMS

โœ” JavaScript Rotate 2D matrix 90 degrees clockwise | Top Interview Question

โœ” HashTable Data Structure in JavaScript with Add Delete & Search Algorithms

โœ” Trie Data Structure โ€“ Insert Search Delete & Print Program with JavaScript

โœ” Top JavaScript Commonly asked Algorithms in Interview

โœ” JavaScript String Permutation Program with nice explanation


๐Ÿ’ก JAVASCRIPT

โœ” How to draw Canvas Image, Line & Circle With HTML & JavaScript

โœ” Konva JS Event Handling and Get Overlapped Shapes where clicked

โœ” JavaScript Increment & Decrement Input Output Questions & What is x++ & var x = x++ ???


๐Ÿ’ก JAVASCRIPT INTERVIEW QUESTIONS

โœ” JavaScript Top Interview questions & Answers You should know

โœ” JavaScript Interview Questions & Answers for Experienced โ€“ Part 2

โœ” JavaScript Interview Question to Write Programs for Experienced โ€“ Part 1

โœ” JavaScript Interview Questions & Answers for Experienced โ€“ Part 1

โœ” Top Interview Questions and Answer of HTML 5 Canvas

โœ” JavaScript Console Interview Questions | Input Output Program

โœ” JavaScript Hoisting Interview Questions & Answers | Console Programs

Create Custom QR Code Component

Leave a Reply

Your email address will not be published.