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 |

📜 License

MIT