Create Custom QR Code Component

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

A 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.

💡 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

0

0