Intosoft QRCode is a fully customizable open source QR code generator tool.
- Versatile and Customizable: Fully color, style, content customization
- Seamless Integration: Integrate Intosoft QRcode seamlessly into your existing tech stack, whether you're working with React, React Native, NodeJS, Vue.js, Angular, or pure JavaScript.
NPM
npm i @intosoft/qrcode
Yarn
yarn add @intosoft/qrcode
React
import { generateSVGString } from '@intosoft/qrcode';
const config = {}; // Paste config here
const svgString = generateSVGString(config);
export const RenderQR = () => {
return <div dangerouslySetInnerHTML={{ __html: svgString }} />;
};React Native
First Install react-native-svg
npm i react-native-svg
import { QRCode } from "@intosoft/qrcode/native";
const config = {}; // Paste config here
// you can use locally imported image, url for the logo
// It support .svg too
export const RenderQR = () => {
return <QRCode config={config} />;
};Vanilla JS
<!DOCTYPE html>
<html>
<body>
<div id="svg-container"></div>
</body>
<script src="https://unpkg.com/@intosoft/qrcode@0.1.4/dist/iife/index.js"></script>
<script>
window.addEventListener("load", function () {
const config = {}; //paste config here
const svgString = window.qrcode.generateSVGString(config);
document.getElementById("svg-container").innerHTML = svgString;
});
</script>
</html>VueJS
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { generateSVGString } from '@intosoft/qrcode';
export default defineComponent({
setup() {
const svgString = ref<string>('');
onMounted(() => {
const config = {}; // Paste config here
svgString.value = generateSVGString(config);
});
return {
svgString
};
}
});
</script>
<template>
<div v-html="svgString"></div>
</template>Angular
import { Component,ChangeDetectorRef } from '@angular/core';
import { DomSanitizer, SafeHtml, } from '@angular/platform-browser';
import { RouterOutlet } from '@angular/router';
import { generateSVGString } from '@intosoft/qrcode';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
template: '<div [innerHTML]="svgString"></div>'
})
export class AppComponent {
title = 'angular';
svgString: SafeHtml = "";
constructor(private sanitizer: DomSanitizer,private cdr: ChangeDetectorRef) {}
ngOnInit(): void {
const config = {}; //paste config here
const svgString = generateSVGString(config);
this.svgString = this.sanitizer.bypassSecurityTrustHtml(svgString)
this.cdr.detectChanges();
}
}NodeJs
const qrcode = require("@intosoft/qrcode");
const config = {}; // paste config here
const svgString = qrcode.generateSVGString(config);
License MIT licensed.
QR Code is a registered trademark of DENSO WAVE INCORPORATED.