Skip to main content

​
How to integrate QRGenerator into a React app

The QRGenerator component is built as a standalone React component that can be easily integrated into any React application.

​
Project structure

generador_qr/
├── src/
│   ├── components/
│   │   └── QRGenerator.jsx    // Main component
│   ├── App.jsx                // App wrapper
│   ├── main.jsx              // Entry point
│   └── index.css             // Styles
├── vite.config.js            // Vite configuration
└── package.json              // Dependencies

​
Required dependencies

{
  "dependencies": {
    "lucide-react": "^0.576.0",
    "qrcode.react": "^4.2.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  }
}
lucide-react provides the icons (Download, QrCode, Settings2, etc.) and qrcode.react provides both QRCodeCanvas and QRCodeSVG components for QR generation.

​
Importing and using the component

1

Import the QRGenerator component

The component is imported as a default export from the components directory (App.jsx:2):
import React from 'react';
import QRGenerator from './components/QRGenerator';
2

Add it to your App component

The basic integration shown in App.jsx (line 4-17):
function App() {
  return (
    <div className="container animate-fade-in">
      <header className="header">
        <h1 className="title">Generador QR Pro</h1>
        <p className="subtitle">
          Crea, personaliza y descarga códigos QR con un diseño 
          premium al instante.
        </p>
      </header>
      
      <main>
        <QRGenerator />
      </main>
    </div>
  );
}

export default App;
3

Render the App

The entry point uses React 19’s createRoot API (main.jsx:6-10):
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
The component is self-contained and manages all its own state, so you can drop it into any React application without additional configuration.

​
Customizing the component for specific use cases

You can customize the QRGenerator component by modifying initial state values or removing features you don’t need.

​
Example: URL-only QR generator

// In QRGenerator.jsx, simplify to only URL tab
export default function QRGenerator() {
  // Remove activeTab state since we only have URL
  const [urlData, setUrlData] = useState('https://example.com');
  
  // Remove wifiData, vcardData, emailData states
  
  // Simplify qrValue to only use urlData
  const [qrValue, setQrValue] = useState(urlData);
  
  useEffect(() => {
    setQrValue(urlData || 'https://');
  }, [urlData]);
  
  // Remove tab navigation UI (line 92-105)
  // Keep only the URL input form (line 109-114)
}

​
Example: WiFi QR code generator only

export default function WiFiQRGenerator() {
  const [wifiData, setWifiData] = useState({ 
    ssid: '', 
    password: '', 
    encryption: 'WPA', 
    hidden: false 
  });
  
  const [qrValue, setQrValue] = useState('');
  
  useEffect(() => {
    setQrValue(
      `WIFI:S:${wifiData.ssid};T:${wifiData.encryption};P:${wifiData.password};H:${wifiData.hidden};;`
    );
  }, [wifiData]);
  
  // Keep only WiFi form fields (line 116-134)
  // Remove other tabs and forms
  // Simplify UI to focus on WiFi credentials
}
If you customize the component, make sure to test QR code generation thoroughly. The format strings (especially for WiFi and vCard) must be exact for proper scanning.

​
Building and deploying the application

Generador QR Pro uses Vite for fast development and optimized production builds.
Start the development server with hot module replacement:
npm run dev
This runs vite command from package.json:7 and starts the dev server on http://localhost:5173

​
Build output

The production build creates optimized assets: 
dist/
├── index.html              // Entry HTML
├── assets/
│   ├── index-[hash].js    // Bundled JavaScript
│   ├── index-[hash].css   // Bundled styles
│   └── [other assets]     // Images, fonts, etc.
Vite automatically handles code splitting, tree shaking, and minification for optimal performance.

​
Vite configuration details

The project uses a minimal Vite configuration optimized for React.
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

​
Key configuration features

Vite + React setup

  • @vitejs/plugin-react: Enables React Fast Refresh and JSX transformation
  • Default port: 5173 for development
  • Hot Module Replacement (HMR): Instant updates without full page reload
  • ES modules: Native ESM imports for faster dev server
  • Automatic code splitting: Optimizes bundle size in production

​
Advanced configuration options

You can extend the Vite config for custom needs: 
export default defineConfig({
  plugins: [react()],
  base: '/qr-generator/', // For subdirectory deployment
})

​
Production build optimization

Vite automatically applies several optimizations to production builds.
1

Code minification

JavaScript and CSS are automatically minified using esbuild (faster than Terser):
  • Removes whitespace and comments
  • Shortens variable names
  • Removes dead code
2

Asset optimization

  • Images and fonts are hashed for cache busting
  • Small images are inlined as base64
  • CSS is extracted into separate files
3

Tree shaking

Unused code is automatically removed:
// Only imported icons are included in bundle
import { Download, QrCode, Settings2, Link, Wifi, User, Mail, Image, Trash2 } from 'lucide-react';
lucide-react’s tree-shakeable structure ensures only these 9 icons are bundled, not the entire icon library.
The production build is typically 70-80% smaller than the development bundle due to these optimizations.

​
Embedding in existing React projects

Integrate the QRGenerator into an existing React application with different routing setups.

​
With React Router

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import QRGenerator from './components/QRGenerator';
import Home from './pages/Home';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/qr-generator" element={<QRGenerator />} />
      </Routes>
    </BrowserRouter>
  );
}

​
As a modal or drawer

import { useState } from 'react';
import QRGenerator from './components/QRGenerator';
import Modal from './components/Modal';

function Dashboard() {
  const [showQRGenerator, setShowQRGenerator] = useState(false);
  
  return (
    <div>
      <button onClick={() => setShowQRGenerator(true)}>
        Generate QR Code
      </button>
      
      <Modal 
        isOpen={showQRGenerator} 
        onClose={() => setShowQRGenerator(false)}
      >
        <QRGenerator />
      </Modal>
    </div>
  );
}

​
With Next.js

// app/qr-generator/page.jsx
'use client'; // Required for useState/useEffect

import QRGenerator from '@/components/QRGenerator';

export default function QRGeneratorPage() {
  return (
    <main>
      <QRGenerator />
    </main>
  );
}
When using Next.js App Router, add 'use client' directive since QRGenerator uses client-side hooks (useState, useEffect, useRef).

​
Component props extension

You can extend the component to accept props for controlled usage: 
export default function QRGenerator({ 
  initialUrl = 'https://example.com',
  initialColors = { fg: '#0f172a', bg: '#ffffff' },
  onGenerate = null 
}) {
  const [urlData, setUrlData] = useState(initialUrl);
  const [fgColor, setFgColor] = useState(initialColors.fg);
  const [bgColor, setBgColor] = useState(initialColors.bg);
  
  // Call onGenerate callback when QR is generated
  useEffect(() => {
    if (onGenerate && qrValue) {
      onGenerate(qrValue);
    }
  }, [qrValue, onGenerate]);
  
  // Rest of component...
}
This allows parent components to control initial values and react to QR code generation.

Build docs developers (and LLMs) love

Get started for freeTalk to us