React Easy QR-Code Generator
Easilty generate QR code from any text or url. It is based on QR Server API.
💡 Features
- Generate QR code for any text and url.
- Small and lightweight.
- Works on all platforms Web, Android and iOS.
🔧 Installation
npm i react-easy-qrcode-generator # npm
yarn add react-easy-qrcode-generator # yarn🖥️ Example
🖥️ Preview
📦 Usage
import React, { useState } from "react";
import { qrcodeGenerator } from "react-easy-qrcode-generator";
export default function App() {
const [value, setValue] = useState("");
return (
<div className="App">
<input value={value} onChange={(e) => setValue(e.target.value)} />
<button
onClick={() =>
qrcodeGenerator({
value: value,
size: "180x180",
title: "Title",
qrAlt: "QR Code Image",
showQrId: "qr-code",
})
}
>
Generator QR
</button>
<div id="qr-code" />
</div>
);
}👀 API References
Functions
qrcodeGenerator({value, size, title, qrAlt, showQrId})
Takes the following parameters:
| Parameter | Type | Default value | Description |
|---|---|---|---|
value |
string |
null |
Required |
size |
string |
180x180 |
Optional |
title |
string |
React easy QR generator |
Optional |
qrAlt |
string |
React easy QR image |
Optional |
showQrId |
string |
null |
Required |
color |
string |
0-0-0 |
Optional |
bgcolor |
string |
255-255-255 Valid examples for color and bgcolor: 255-0-0 (red),f00 (red), FF0000 (red), 0-255-0 (green), 0f0 (green), 00ff00 (green), 0-0-255 (blue), 00f (blue), 0000ff (blue), 556B2F (DarkOliveGreen) |
Optional |