React QR Code Generator

Generate customizable QR codes in your React applications with ease.

---

Features

• Generate QR codes from any string or URL
• Customizable size, color, and error correction level
• Lightweight and fast
• Easy integration with React
• TypeScript support

---

Table of Contents

• Features
• Installation
• Usage
• API Reference
• Options
• Styling
• Contributing
• License

---

Installation

npm install @makozi/react-qr-code-generator

---

Usage

Import and use the QRCodeGenerator component:

import React from 'react';
import { QRCodeGenerator } from '@makozi/react-qr-code-generator';

const App = () => (
  <div>
    <h2>Scan this QR code:</h2>
    <QRCodeGenerator
      value="https://example.com"
      size={200}
      bgColor="#ffffff"
      fgColor="#000000"
      level="M" 
    />
  </div>
);

export default App;

---

API Reference

<QRCodeGenerator />

Renders a QR code SVG for the provided value.

Props

• value (string, required): The data to encode in the QR code
• size (number, optional): Size of the QR code in pixels (default: 128)
• bgColor (string, optional): Background color (default: #fff)
• fgColor (string, optional): Foreground color (default: #000)
• level (string, optional): Error correction level (L, M, Q, H) (default: M)

---

Options

Option	Type	Description	Default
value	string	Data to encode in the QR code	—
size	number	Size of the QR code in pixels	128
bgColor	string	Background color	#fff
fgColor	string	Foreground color	#000
level	string	Error correction level (L, M, Q, H)	M

---

Styling

The QR code is rendered as an SVG. You can style the container or SVG using CSS as needed.

---

Contributing

Contributions are welcome! Please open issues or submit PRs for improvements or bug fixes.

---

License

MIT © Makozi Marizu-Ibewiro

---

Repository

https://github.com/makozi/react-qr-code-generator

Homepage

https://github.com/makozi/react-qr-code-generator