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
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 = ; OR ;
Examples
Basic Example with all default props
; var props=value:'Your text or URL here'; return <div id="qr-container"></div> <button onClick=>generate</button>;
Basic Example to show logo in QR code
; var props=isLogo:truevalue:'Your text or URL here'; return <div id="qr-container"></div> <button onClick=>generate</button> <img id='qr-logo-image' src=home style= display: 'none' />;
Basic Example to set height width of QR code
; var props=width:256height:256value:'Your text or URL here'; return <div id="qr-container"></div> <button onClick=>generate</button>;
Basic Example to set width of logo in QR-code
; var props=isLogo:truelogoSize:80value:'Your text or URL here'; return <div id="qr-container"></div> <button onClick=>generate</button> <img id='qr-logo-image' src=home style= display: 'none' />;
Basic Example to set background or forground color of QR-code
; var props=backgroundColor:'#fff'foregroundColor:'#000'value:'Your text or URL here'; return <div id="qr-container"></div> <button onClick=>generate</button>;
Basic Example with all default props in React
import React Component from 'react';import QRGenerator from 'dynamic-qr-code-generator'; { var props=backgroundColor:'#fff'foregroundColor:'#000'width:256height:256isLogo:truelogoSize:80customLogoDesign:falsevalue:'Your text or URL here' return <div> <div ="qr-container"></div> <button =>generate</button> <img ='qr-logo-image' = = /> </div> ; } ;
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