Create Custom QR Code Component using QR Code Styling in React JS

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.

Property	Type	Default Value	Description
width	number	`300`	Size of canvas
height	number	`300`	Size of canvas
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

💡 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>

How to create a common Helper class or util file in React JS

React Build Routing with Fixed Header and Navigation | React Router Tutorial

Create Custom QR Code Component

JS Mount

Learn More

Create Custom QR Code Component using QR Code Styling in React JS

You can find QR Code Styling npm package here.

💻 Required Imports:

💻 Let’s Create an Object of QrCodeStyling

💡 Below are all available properties that we can set within Object.

💡 HTML part to render Canvas only of QR Code

💡 HTML part with Canvas and Outer Div with Title and Dynamic Styles

💡 Let’s see useEffect hook to add props in exist QrCodeStyling object.

💡 Set main data into QrCodeStyling using useEffect

✋ Use of Above Component by passing props

💡 HTML AND CSS

💡 DATA STRUCTURE & ALGORITHMS

💡 JAVASCRIPT

💡 JAVASCRIPT INTERVIEW QUESTIONS

Leave a Reply Cancel Reply