react-easy-qrcode-generator

1.0.8 • Public • Published

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

Try with CodeSandbox

🖥️ Preview

Web

📦 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

Package Sidebar

Install

npm i react-easy-qrcode-generator

Weekly Downloads

262

Version

1.0.8

License

MIT

Unpacked Size

4.81 kB

Total Files

4

Last publish

Collaborators

  • mukesh.prajapati