Framework Integrations

Integrate QR Code API with popular frameworks and libraries.

React

Basic Component

jsx

import { useState, useEffect } from 'react';

function QRCode({ data, size = 200, color = '000000' }) {
  const [src, setSrc] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchQR() {
      setLoading(true);
      setError(null);
      
      try {
        const params = new URLSearchParams({
          data,
          size: size.toString(),
          color
        });
        
        const response = await fetch(
          `https://www.qrcodeapi.io/api/generate?${params}`,
          { headers: { 'Authorization': `Bearer ${process.env.REACT_APP_API_KEY}` } }
        );
        
        if (!response.ok) throw new Error('Failed to generate QR');
        
        const blob = await response.blob();
        setSrc(URL.createObjectURL(blob));
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    
    if (data) fetchQR();
  }, [data, size, color]);

  if (loading) return <div className="qr-loading">Loading...</div>;
  if (error) return <div className="qr-error">{error}</div>;
  if (!src) return null;

  return <img src={src} alt="QR Code" width={size} height={size} />;
}

// Usage
function App() {
  return <QRCode data="https://example.com" size={300} color="22c55e" />;
}

Custom Hook

jsx

import { useState, useEffect, useCallback } from 'react';

function useQRCode(initialData = '') {
  const [data, setData] = useState(initialData);
  const [options, setOptions] = useState({
    size: 300,
    color: '000000',
    background: 'ffffff',
    format: 'png'
  });
  const [qrUrl, setQrUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const generate = useCallback(async () => {
    if (!data) return;
    
    setLoading(true);
    setError(null);
    
    try {
      const params = new URLSearchParams({ data, ...options });
      const response = await fetch(
        `https://www.qrcodeapi.io/api/generate?${params}`,
        { headers: { 'Authorization': `Bearer ${API_KEY}` } }
      );
      
      if (!response.ok) {
        throw new Error((await response.json()).message);
      }
      
      const blob = await response.blob();
      setQrUrl(URL.createObjectURL(blob));
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, [data, options]);

  useEffect(() => {
    generate();
  }, [generate]);

  return {
    data,
    setData,
    options,
    setOptions,
    qrUrl,
    loading,
    error,
    regenerate: generate
  };
}

// Usage
function QRGenerator() {
  const {
    data,
    setData,
    options,
    setOptions,
    qrUrl,
    loading
  } = useQRCode('https://example.com');

  return (
    <div>
      <input
        value={data}
        onChange={e => setData(e.target.value)}
        placeholder="Enter URL"
      />
      <input
        type="color"
        value={`#${options.color}`}
        onChange={e => setOptions({...options, color: e.target.value.slice(1)})}
      />
      {loading ? <p>Loading...</p> : <img src={qrUrl} alt="QR" />}
    </div>
  );
}

Vue 3

Composable

vue

<script setup>
import { ref, watch, computed } from 'vue';

const props = defineProps({
  data: String,
  size: { type: Number, default: 300 },
  color: { type: String, default: '000000' }
});

const qrUrl = ref('');
const loading = ref(false);
const error = ref(null);

const generateQR = async () => {
  if (!props.data) return;
  
  loading.value = true;
  error.value = null;
  
  try {
    const params = new URLSearchParams({
      data: props.data,
      size: props.size.toString(),
      color: props.color
    });
    
    const response = await fetch(
      `https://www.qrcodeapi.io/api/generate?${params}`,
      { headers: { 'Authorization': `Bearer ${import.meta.env.VITE_API_KEY}` } }
    );
    
    if (!response.ok) throw new Error('Failed to generate');
    
    const blob = await response.blob();
    qrUrl.value = URL.createObjectURL(blob);
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
};

watch(() => [props.data, props.size, props.color], generateQR, { immediate: true });
</script>

<template>
  <div class="qr-code">
    <div v-if="loading" class="loading">Loading...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <img v-else-if="qrUrl" :src="qrUrl" alt="QR Code" :width="size" :height="size" />
  </div>
</template>

Vue Composable

javascript

// composables/useQRCode.js
import { ref, watch } from 'vue';

export function useQRCode(initialData = '') {
  const data = ref(initialData);
  const options = ref({
    size: 300,
    color: '000000',
    background: 'ffffff'
  });
  const qrUrl = ref('');
  const loading = ref(false);
  const error = ref(null);

  const generate = async () => {
    if (!data.value) return;
    
    loading.value = true;
    error.value = null;
    
    try {
      const params = new URLSearchParams({
        data: data.value,
        ...options.value
      });
      
      const response = await fetch(
        `https://www.qrcodeapi.io/api/generate?${params}`,
        { headers: { 'Authorization': `Bearer ${import.meta.env.VITE_API_KEY}` } }
      );
      
      const blob = await response.blob();
      qrUrl.value = URL.createObjectURL(blob);
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  };

  watch([data, options], generate, { immediate: true, deep: true });

  return { data, options, qrUrl, loading, error, regenerate: generate };
}

Next.js

API Route (App Router)

javascript

// app/api/qr/route.js
export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const data = searchParams.get('data');
  
  if (!data) {
    return Response.json({ error: 'data required' }, { status: 400 });
  }
  
  const params = new URLSearchParams({
    data,
    size: searchParams.get('size') || '300',
    color: searchParams.get('color') || '000000'
  });
  
  const response = await fetch(
    `https://www.qrcodeapi.io/api/generate?${params}`,
    { headers: { 'Authorization': `Bearer ${process.env.QRCODE_API_KEY}` } }
  );
  
  if (!response.ok) {
    const error = await response.json();
    return Response.json(error, { status: response.status });
  }
  
  const blob = await response.blob();
  
  return new Response(blob, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=3600'
    }
  });
}

Server Component

jsx

// app/qr/page.jsx
async function generateQR(data) {
  const response = await fetch(
    `https://www.qrcodeapi.io/api/generate?data=${encodeURIComponent(data)}`,
    {
      headers: { 'Authorization': `Bearer ${process.env.QRCODE_API_KEY}` },
      next: { revalidate: 3600 }
    }
  );
  
  const buffer = await response.arrayBuffer();
  return `data:image/png;base64,${Buffer.from(buffer).toString('base64')}`;
}

export default async function QRPage({ searchParams }) {
  const data = searchParams.data || 'https://example.com';
  const qrDataUrl = await generateQR(data);
  
  return (
    <div>
      <h1>QR Code</h1>
      <img src={qrDataUrl} alt="QR Code" />
    </div>
  );
}

Svelte

svelte

<script>
  export let data = '';
  export let size = 300;
  export let color = '000000';
  
  let qrUrl = '';
  let loading = true;
  let error = null;
  
  $: if (data) generateQR(data, size, color);
  
  async function generateQR(data, size, color) {
    loading = true;
    error = null;
    
    try {
      const params = new URLSearchParams({
        data,
        size: size.toString(),
        color
      });
      
      const response = await fetch(
        `https://www.qrcodeapi.io/api/generate?${params}`,
        { headers: { 'Authorization': `Bearer ${import.meta.env.VITE_API_KEY}` } }
      );
      
      if (!response.ok) throw new Error('Failed');
      
      const blob = await response.blob();
      qrUrl = URL.createObjectURL(blob);
    } catch (err) {
      error = err.message;
    } finally {
      loading = false;
    }
  }
</script>

{#if loading}
  <div class="loading">Loading...</div>
{:else if error}
  <div class="error">{error}</div>
{:else if qrUrl}
  <img src={qrUrl} alt="QR Code" width={size} height={size} />
{/if}

Angular

Service

typescript

// qr-code.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class QRCodeService {
  private baseUrl = 'https://www.qrcodeapi.io/api';

  constructor(private http: HttpClient) {}

  generate(data: string, options: QROptions = {}): Observable<Blob> {
    const params = new URLSearchParams({
      data,
      size: (options.size || 300).toString(),
      color: options.color || '000000',
      background: options.background || 'ffffff'
    });

    return this.http.get(`${this.baseUrl}/generate?${params}`, {
      headers: { 'Authorization': `Bearer ${environment.apiKey}` },
      responseType: 'blob'
    });
  }
}

interface QROptions {
  size?: number;
  color?: string;
  background?: string;
}

Component

typescript

// qr-code.component.ts
import { Component, Input, OnChanges } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { QRCodeService } from './qr-code.service';

@Component({
  selector: 'app-qr-code',
  template: `
    <div class="qr-container">
      <div *ngIf="loading" class="loading">Loading...</div>
      <img *ngIf="qrUrl && !loading" [src]="qrUrl" alt="QR Code" [width]="size">
    </div>
  `
})
export class QRCodeComponent implements OnChanges {
  @Input() data: string = '';
  @Input() size: number = 300;
  @Input() color: string = '000000';
  
  qrUrl: SafeUrl | null = null;
  loading = false;

  constructor(
    private qrService: QRCodeService,
    private sanitizer: DomSanitizer
  ) {}

  ngOnChanges() {
    this.generateQR();
  }

  generateQR() {
    if (!this.data) return;
    
    this.loading = true;
    this.qrService.generate(this.data, {
      size: this.size,
      color: this.color
    }).subscribe({
      next: (blob) => {
        const url = URL.createObjectURL(blob);
        this.qrUrl = this.sanitizer.bypassSecurityTrustUrl(url);
        this.loading = false;
      },
      error: (err) => {
        console.error(err);
        this.loading = false;
      }
    });
  }
}

Express.js Middleware

javascript

// middleware/qr.js
const qrMiddleware = (apiKey) => {
  return async (req, res, next) => {
    req.generateQR = async (data, options = {}) => {
      const params = new URLSearchParams({ data, ...options });
      
      const response = await fetch(
        `https://www.qrcodeapi.io/api/generate?${params}`,
        { headers: { 'Authorization': `Bearer ${apiKey}` } }
      );
      
      if (!response.ok) {
        throw new Error((await response.json()).message);
      }
      
      return response;
    };
    
    next();
  };
};

// Usage
const express = require('express');
const app = express();

app.use(qrMiddleware(process.env.QRCODE_API_KEY));

app.get('/qr', async (req, res) => {
  const response = await req.generateQR(req.query.data, {
    size: req.query.size || 300
  });
  
  res.set('Content-Type', response.headers.get('content-type'));
  response.body.pipe(res);
});

JavaScript Guide - Full JavaScript guide
Python Guide - Full Python guide
API Reference - API documentation

Framework Integrations ​

React ​

Basic Component ​

Custom Hook ​

Vue 3 ​

Composable ​

Vue Composable ​

Next.js ​

API Route (App Router) ​

Server Component ​

Svelte ​

Angular ​

Service ​

Component ​

Express.js Middleware ​

Related ​

Framework Integrations

React

Basic Component

Custom Hook

Vue 3

Composable

Vue Composable

Next.js

API Route (App Router)

Server Component

Svelte

Angular

Service

Component

Express.js Middleware

Related