@intosoft/qrcode

v0.1.4

Published

11 days ago

The best tool for QR Code generation in JavaScript (React, React Native, Node.js, VueJS, Angular, JQuery, VanillaJS)

Downloads

461

Intosoft QRCode ·

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.

Sample image

Demo / Config generator tool

Installation

NPM

npm i @intosoft/qrcode

Yarn

yarn add @intosoft/qrcode

Examples

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/[email protected]/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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Intosoft QRCode ·

Demo / Config generator tool

Installation

Examples

License MIT licensed.