Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@intosoft/qrcode

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@intosoft/qrcode

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

0.1.4
latest
Source
npm

Version published: 2 weeks ago

Weekly downloads: 92; decreased by-41.03%

Maintainers: 0

Weekly downloads

Created: 5 months ago

Source

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

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

Keywords

FAQs

What is @intosoft/qrcode?

Is @intosoft/qrcode popular?

Is @intosoft/qrcode well maintained?

Package last updated on 07 Nov 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install