dynamic-qr-code-generator

dynamic-qr-code-generator

A vanilla javaScript based NPM package that generate QR code with logo and customisable options. Also give a better user experience with better and flexible options/features.

Demo and Docs

• Inspired by npm link

• Click here for live demo

Installation

The package can be installed via NPM:

npm install dynamic-qr-code-generator --save

yarn add dynamic-qr-code-generator

dynamic-qr-code-generator can be imported as follows

var {QRGenerator} = require('dynamic-qr-code-generator');

OR

import {QRGenerator} from 'dynamic-qr-code-generator';

Examples

Basic Example with all default props

import {QRGenerator} from 'dynamic-qr-code-generator';

var props={value:'Your text or URL here'};

return (
        <div id="qr-container"></div>
        <button onClick={()=>QRGenerator(props)}>generate</button>
);

Basic Example to show logo in QR code

import {QRGenerator} from 'dynamic-qr-code-generator';

var props={isLogo:true,value:'Your text or URL here'};

return (
        <div id="qr-container"></div>
        <button onClick={()=>QRGenerator(props)}>generate</button>
        <img id='qr-logo-image' src={home} style={{ display: 'none' }} />
);

Basic Example to set height width of QR code

import {QRGenerator} from 'dynamic-qr-code-generator';

var props={width:256,height:256,value:'Your text or URL here'};

return (
        <div id="qr-container"></div>
        <button onClick={()=>QRGenerator(props)}>generate</button>
);

Basic Example to set width of logo in QR-code

import {QRGenerator} from 'dynamic-qr-code-generator';

var props={isLogo:true,logoSize:80,value:'Your text or URL here'};

return (
        <div id="qr-container"></div>
        <button onClick={()=>QRGenerator(props)}>generate</button>
        <img id='qr-logo-image' src={home} style={{ display: 'none' }} />
);

Basic Example to set background or forground color of QR-code

import {QRGenerator} from 'dynamic-qr-code-generator';

var props={backgroundColor:'#fff',foregroundColor:'#000',value:'Your text or URL here'};

return (
        <div id="qr-container"></div>
        <button onClick={()=>QRGenerator(props)}>generate</button>
);

Basic Example with all default props in React

import React, { Component } from 'react';
import {QRGenerator} from 'dynamic-qr-code-generator';

class App extends Component {

  render() {
      var props={backgroundColor:'#fff',foregroundColor:'#000',width:256,height:256,isLogo:true,logoSize:80,customLogoDesign:false,value:'Your text or URL here'}
    return (
      <div>
        <div id="qr-container"></div>
        <button onClick={()=>QRGenerator()}>generate</button>
        <img id='qr-logo-image' src={home} style={{ display: 'none' }} />
      </div>
    );
  }
}

export default App;

Default parameter options value

    backgroundColor:'#fff',
    foregroundColor:'#000',
    width:256,
    height:256,
    isLogo:false,
    logoSize:80,
    customLogoDesign:false,
    value:'https://github.com/TechnologyGeek12/qr-code-generator'

Available options list

    backgroundColor:String,
    foregroundColor:String,
    width:Number,
    height:Number,
    isLogo:Boolean,
    logoSize:Number,
    customLogoDesign:Boolean,
    value:String     

The word 'QR Code' is registered trademark of DENSO WAVE INCORPORATED Check here