next-qrcode

The useQRCode hook is the primary entry point for the library. It returns an object containing different rendering components: Canvas, SVG, and Image. You can choose the component based on your rendering needs (e.g., Canvas for pixel-based rendering, SVG for vector graphics, or Image for standard image formats).

import { useQRCode } from 'next-qrcode';

function App() {
  const { Canvas, SVG, Image } = useQRCode();
  // ... use components
}

You can install next-qrcode using npm or yarn to use its React hooks for generating QR codes.

npm install next-qrcode --save

yarn add next-qrcode --save

To start the development server for the Next.js application, use your preferred package manager to run the dev script. Once running, you can view the application in your browser at http://localhost:3000.

npm run dev
# or
yarn dev
# or
pnpm dev

The Canvas component renders the QR code using an HTML5 Canvas. It is useful for pixel-based rendering and supports adding a logo in the center.

import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { Canvas } = useQRCode();

  return (
    <Canvas
      text={'https://github.com/bunlong/next-qrcode'}
      options={{
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}

The SVG component renders the QR code as a scalable vector graphic. This is ideal for high-quality displays and print media.

import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { SVG } = useQRCode();

  return (
    <SVG
      text={'https://github.com/bunlong/next-qrcode'}
      options={{
        margin: 2,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}

The Image component renders the QR code as a standard image element (e.g., <img>). This is useful when you need to provide a specific image format like PNG, JPEG, or WebP.

import React from 'react';
import { useQRCode } from 'next-qrcode';

function App() {
  const { Image } = useQRCode();

  return (
    <Image
      text={'https://github.com/bunlong/next-qrcode'}
      options={{
        type: 'image/jpeg',
        quality: 0.3,
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#010599FF',
          light: '#FFBF60FF',
        },
      }}
    />
  );
}

SVG Props

SVG Options

The useQRCode hook is the primary entry point for the library. It returns three specialized React components: Image, Canvas, and SVG. Each component accepts a text prop (the content of the QR code) and optional options or logo configurations.

Components

• Image: Renders an <img> element with the QR code as a Data URL.
• Canvas: Renders a <canvas> element. This is the only component that supports a logo overlay.
• SVG: Renders a <div> containing the QR code as an inline SVG string.

import { useQRCode } from 'next-qrcode';

const { Canvas, Image, SVG } = useQRCode();

function MyComponent() {
  return (
    <Canvas 
      text="https://example.com" 
      options={{ margin: 2 }} 
    />
  );
}

To overlay a logo on a QR code, you must use the Canvas component. The logo prop accepts an object containing the image source and optional positioning options.

Logo Positioning

• Manual Positioning: Provide x and y coordinates within logo.options to place the logo at a specific location.
• Automatic Centering: If x and y are omitted, the component automatically calculates the center position based on the QR code's width and the logo's width.

Logo Options

• width: The size of the logo (defaults to 30).
• x: The horizontal coordinate.
• y: The vertical coordinate.

const { Canvas } = useQRCode();

<Canvas
  text="https://example.com"
  logo={{
    src: "/path/to/logo.png",
    options: {
      width: 40,
      x: 10,
      y: 10
    }
  }}
/>