React QR Code Generator

Why React for QR Codes

• Component Reusability: Create once, use everywhere
• State Management: Reactive updates to QR codes
• Performance: Memoization prevents unnecessary re-renders
• Integration: Works with Redux, Context API, Zustand
• Testing: Easy to test component behavior

Installation

npm install qrcode.react

Basic React Component

Functional Component

import QRCode from 'qrcode.react';

export default function BasicQR() {
  return (
    <QRCode
      value="https://example.com"
      size={256}
      level="H"
      includeMargin={true}
      fgColor="#000000"
      bgColor="#FFFFFF"
    />
  );
}

With useRef for Download

import { useRef } from 'react';
import QRCode from 'qrcode.react';

export default function DownloadableQR() {
  const qrRef = useRef();

  const downloadQR = () => {
    const canvas = qrRef.current.querySelector('canvas');
    const url = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.href = url;
    link.download = 'qrcode.png';
    link.click();
  };

  return (
    <div>
      <QRCode
        ref={qrRef}
        value="https://example.com"
        size={256}
      />
      <button onClick={downloadQR}>Download QR</button>
    </div>
  );
}

State Management Pattern

useState Hook

import { useState } from 'react';
import QRCode from 'qrcode.react';

export default function DynamicQR() {
  const [url, setUrl] = useState('https://example.com');
  const [color, setColor] = useState('#000000');
  const [size, setSize] = useState(256);

  return (
    <div style={{ padding: '20px' }}>
      <input
        type="text"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        placeholder="Enter URL or text"
        style={{ display: 'block', marginBottom: '10px', width: '100%', padding: '8px' }}
      />

      <label>
        Size:
        <input
          type="range"
          min="100"
          max="500"
          value={size}
          onChange={(e) => setSize(Number(e.target.value))}
        />
      </label>

      <label style={{ marginLeft: '20px' }}>
        Color:
        <input
          type="color"
          value={color}
          onChange={(e) => setColor(e.target.value)}
        />
      </label>

      <div style={{ marginTop: '20px' }}>
        <QRCode value={url} size={size} fgColor={color} />
      </div>
    </div>
  );
}

Advanced Patterns

With Custom Hook

import { useState, useCallback } from 'react';
import QRCode from 'qrcode.react';

function useQRCode(initialValue = '') {
  const [value, setValue] = useState(initialValue);
  const [options, setOptions] = useState({
    size: 256,
    fgColor: '#000000',
    bgColor: '#FFFFFF',
    level: 'H'
  });

  const updateValue = useCallback((newValue) => setValue(newValue), []);
  const updateOptions = useCallback((newOptions) => {
    setOptions(prev => ({ ...prev, ...newOptions }));
  }, []);

  return { value, options, updateValue, updateOptions };
}

export default function QRGenerator() {
  const { value, options, updateValue, updateOptions } = 
    useQRCode('https://example.com');

  return (
    <div>
      <QRCode {...options} value={value} />
      <input
        value={value}
        onChange={(e) => updateValue(e.target.value)}
      />
      <button onClick={() => updateOptions({ level: 'L' })}>
        Lower Error Correction
      </button>
    </div>
  );
}

With Context API

import { createContext, useState } from 'react';

const QRContext = createContext();

export function QRProvider({ children }) {
  const [qrValue, setQRValue] = useState('https://example.com');

  return (
    <QRContext.Provider value={{ qrValue, setQRValue }}>
      {children}
    </QRContext.Provider>
  );
}

export function useQR() {
  return useContext(QRContext);
}

Performance Optimization

Memoization

import { useMemo } from 'react';
import QRCode from 'qrcode.react';

export default function OptimizedQR({ data }) {
  const memoizedValue = useMemo(() => data, [data]);

  return <QRCode value={memoizedValue} size={256} />;
}

Lazy Loading

import { lazy, Suspense } from 'react';

const LazyQR = lazy(() => import('./QRComponent'));

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyQR />
    </Suspense>
  );
}

Best Practices

• Memoize heavy computations with useMemo
• Use useRef for canvas operations
• Avoid re-renders with React.memo or useMemo
• Handle errors gracefully
• Test component with React Testing Library
• Type with TypeScript for better DX

Generate Your QR Codes