Skip to main content
CustoQR

@intosoft/qrcode

React

Modern React implementation with hooks support. Works with React 18+ and Next.js.

Zero DependenciesTypeScript ReadyProduction Ready

Getting Started

Welcome to the @intosoft/qrcode documentation for React. This powerful library allows you to generate beautiful, customizable QR codes with ease.

✨

31+ Shapes

Customize body, eyeball, and frame shapes

🎨

Full Colors

Unlimited color combinations

🖼️

Logo Support

Embed your brand logo

Installation

Install via npm

bash
npm install @intosoft/qrcode

Or use yarn

bash
yarn add @intosoft/qrcode

Import in your project

tsx
import { generateQRCode } from '@intosoft/qrcode';

Basic Usage

Simple QR Code

Generate a basic QR code with minimal configuration.

tsx
import { generateQRCode } from '@intosoft/qrcode';

function QRCode() {
  const qrCode = generateQRCode('https://example.com');
  
  return (
    <div dangerouslySetInnerHTML={{ __html: qrCode }} />
  );
}

With Custom Options

Customize colors, size, and error correction level.

tsx
import { generateQRCode } from '@intosoft/qrcode';

function QRCode({ data }: { data: string }) {
  const qrCode = generateQRCode(data, {
    width: 400,
    height: 400,
    bodyColor: '#1a1a1a',
    bgColor: '#ffffff',
    bodyShape: 'rounded',
    errorCorrectionLevel: 'H'
  });
  
  return (
    <div dangerouslySetInnerHTML={{ __html: qrCode }} />
  );
}

Complete Component Example

Full implementation ready to use in your React project.

tsx
import { generateQRCode } from '@intosoft/qrcode';
import { useMemo, useState } from 'react';

function QRCodeGenerator() {
  const [url, setUrl] = useState('https://example.com');
  const [options, setOptions] = useState({
    width: 400,
    bodyShape: 'rounded',
    bodyColor: '#000000'
  });

  const qrCode = useMemo(() => {
    return generateQRCode(url, options);
  }, [url, options]);

  return (
    <div>
      <input
        type="text"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        placeholder="Enter URL"
      />
      <div dangerouslySetInnerHTML={{ __html: qrCode }} />
    </div>
  );
}

export default QRCodeGenerator;

Customization Options

🔷 Shape Options

bodyShape - 31+ options
eyeballShape - 21+ patterns
eyeFrameShape - 21+ designs

🎨 Color Options

bodyColor - Main QR color
bgColor - Background
eyeballColor - Eye balls
eyeFrameColor - Eye frames

📐 Size Options

width - Width in pixels
height - Height in pixels

🖼️ Logo Options

logo - Logo URL or data URI
logoSize - Size 0-40%
errorCorrectionLevel - L, M, Q, H

Advanced Customization Example

tsx
import { generateQRCode } from '@intosoft/qrcode';
import { useMemo, useState, useCallback } from 'react';

interface QROptions {
  width: number;
  bodyShape: string;
  bodyColor: string;
  logo?: string;
}

function AdvancedQRCode({ data }: { data: string }) {
  const [options, setOptions] = useState<QROptions>({
    width: 500,
    bodyShape: 'rounded',
    bodyColor: '#2563eb'
  });

  const qrCode = useMemo(() => {
    return generateQRCode(data, {
      ...options,
      errorCorrectionLevel: 'H',
      eyeballShape: 'circle',
      eyeFrameShape: 'rounded'
    });
  }, [data, options]);

  const downloadQR = useCallback(() => {
    const blob = new Blob([qrCode], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'qrcode.svg';
    a.click();
    URL.revokeObjectURL(url);
  }, [qrCode]);

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: qrCode }} />
      <button onClick={downloadQR}>Download</button>
    </div>
  );
}

Advanced Features

Server-Side Rendering

Generate QR codes on the server for better performance and SEO.

tsx
// Next.js API Route: app/api/qr/route.ts
import { generateQRCode } from '@intosoft/qrcode';
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const data = searchParams.get('data') || 'https://example.com';
  
  const qrCode = generateQRCode(data, {
    width: 400,
    bodyShape: 'rounded'
  });
  
  return new NextResponse(qrCode, {
    headers: {
      'Content-Type': 'image/svg+xml',
      'Cache-Control': 'public, max-age=31536000'
    }
  });
}

Dynamic QR Codes

Update QR codes dynamically based on user input or real-time data.

tsx
import { generateQRCode } from '@intosoft/qrcode';
import { useState, useEffect, useMemo } from 'react';

function DynamicQRCode() {
  const [config, setConfig] = useState({
    data: 'https://example.com',
    bodyShape: 'rounded',
    bodyColor: '#000000'
  });

  const qrCode = useMemo(() => {
    return generateQRCode(config.data, {
      width: 400,
      bodyShape: config.bodyShape,
      bodyColor: config.bodyColor
    });
  }, [config]);

  useEffect(() => {
    // Auto-update from external source
    const interval = setInterval(() => {
      // Fetch new config from API
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: qrCode }} />;
}

Batch Generation

Generate multiple QR codes efficiently for bulk operations.

tsx
import { generateQRCode } from '@intosoft/qrcode';
import { useMemo } from 'react';

interface QRItem {
  id: string;
  data: string;
  color: string;
}

function BatchQRCodes({ items }: { items: QRItem[] }) {
  const qrCodes = useMemo(() => {
    return items.map(item => ({
      ...item,
      qr: generateQRCode(item.data, {
        width: 300,
        bodyColor: item.color
      })
    }));
  }, [items]);

  return (
    <div className="grid grid-cols-3 gap-4">
      {qrCodes.map(({ id, qr }) => (
        <div key={id} dangerouslySetInnerHTML={{ __html: qr }} />
      ))}
    </div>
  );
}
💡

Pro Tips

  • • Use higher error correction levels (Q or H) when adding logos
  • • Keep logo size under 30% for reliable scanning
  • • Test QR codes with multiple scanning apps before deployment
  • • Use contrasting colors for better readability
  • • Cache generated QR codes for better performance
  • • Consider using SVG format for scalability

Ready to Build Amazing QR Codes?

Start generating beautiful, customizable QR codes in your React project today.