How to Generate QR Codes in React.js & Next.js (qrcode.react Guide)

The qrcode.react library is the standard React component for rendering high-performance SVG and Canvas QR codes.

1. Installation

npm install qrcode.react

2. React Component Code

import { QRCodeSVG } from 'qrcode.react';

export default function MyQRCode() {
  return (
    <QRCodeSVG
      value="https://www.pngqr.com"
      size={256}
      bgColor={"#ffffff"}
      fgColor={"#000000"}
      level={"H"}
      includeMargin={true}
    />
  );
}