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