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