QR Code Generator in the SharePoint Framework (SPFx) Web Part

This article provides steps to implement a QR Code Generator in the SharePoint Framework (SPFx) web part.
The QR Code Generator is a simple and convenient tool that dynamically creates a QR code image based on user-provided input such as URLs, text, contact details, or location information.

⚙️ Install Required Dependencies

Install the QR code generation library:

npm install qrcode.react --save

🧩 Define the Properties Interface

In your web part class file, define the following interface:

export interface ISpfxQrcodeWebPartProps {
  qrcontent: string;
  qrcodedata: string;
}

⚛️ Implement the React Component

Update your SpfxQrcode.tsx file to render the QR code dynamically based on the property value.

import * as React from 'react';
import styles from './SpfxQrcode.module.scss';
import { ISpfxQrcodeProps } from './ISpfxQrcodeProps';
import QRCode from 'qrcode.react';

export default class SpfxQrcode extends React.Component<ISpfxQrcodeProps, {}> {
  public render(): React.ReactElement<ISpfxQrcodeProps> {
    return (
      <div className={styles.spfxQrcode}>
        <h2>QR Code Generator</h2>
        <QRCode
          value={this.props.qrcontent || 'https://www.sharepoint.com'}
          size={180}
          bgColor="#ffffff"
          fgColor="#000000"
          includeMargin={true}
        />
        <p>{this.props.qrcontent}</p>
      </div>
    );
  }
}

🧰 Configure the Property Pane

Allow users to provide QR content through the property pane.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: { description: 'QR Code Generator Settings' },
        groups: [
          {
            groupName: 'Content Settings',
            groupFields: [
              PropertyPaneTextField('qrcontent', {
                label: 'Enter the content for QR Code',
                multiline: false
              })
            ]
          }
        ]
      }
    ]
  };
}

🧠 Explanation

• QRCode → Component from qrcode.react library that renders the QR image.
• value → The actual content to encode (e.g., a URL or contact info).
• size → The pixel size of the QR image.
• fgColor / bgColor → Customize foreground and background colors.
• PropertyPaneTextField → Lets users modify the QR content directly from the web part configuration panel.

🚀 Deploy the Solution

Bundle and deploy your SPFx solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file to your App Catalog, deploy it, and add the web part to your SharePoint page.

📦 Example Output

After deploying, users can type any content into the property pane — such as a URL, text, or contact information — and see an instantly generated QR code displayed on the page.

📂 GitHub Source

✅ Summary

You’ve successfully implemented a QR Code Generator using React and SPFx.
This component is lightweight, customizable, and supports multiple use cases like URL sharing, email links, SMS contact, or event registration.