The QRCode component in goobs-frontend is a versatile component for generating and displaying QR codes. It provides an easy way to create QR codes for various purposes such as URLs, contact information, or any other text-based data.

To use the QRCode component in your project, import it from the goobs-frontend package:

import { QRCodeComponent } from 'goobs-frontend';

Here's a basic example of how to use the QRCode component:

import React from 'react';
import { QRCodeComponent } from 'goobs-frontend';

const QRCodeExample: React.FC = () => {
  return (
    <QRCodeComponent
      value="https://www.example.com"
      size={256}
      title="Visit our website"
    />
  );
};

export default QRCodeExample;

The QRCode component accepts the following props:

• value: string (required) - The data to be encoded in the QR code.
• size: number (optional, default: 256) - The size of the QR code in pixels.
• title: string (optional) - An optional title to display above the QR code.
• sx: SxProps (optional) - Custom styles to apply to the component.

1. Customizable Size: Allows setting the size of the QR code.
2. Optional Title: Can display a title above the QR code.
3. Styling Options: Supports custom styling through the sx prop.
4. Error Handling: Displays an error message for invalid QR code values.
5. Accessibility: Includes proper ARIA attributes for screen readers.

You can customize the appearance of the QRCode component using the sx prop. Here's an example with custom styling:

import React from 'react';
import { QRCodeComponent } from 'goobs-frontend';

const StyledQRCodeExample: React.FC = () => {
  return (
    <QRCodeComponent
      value="https://www.example.com"
      size={200}
      title="Scan me!"
      sx={{
        backgroundColor: '#f0f0f0',
        padding: 2,
        borderRadius: 2,
        '& h6': {
          color: '#333',
          marginBottom: 1,
        },
      }}
    />
  );
};

export default StyledQRCodeExample;

You can use the QRCode component to generate QR codes dynamically based on user input or application state:

import React, { useState } from 'react';
import { QRCodeComponent } from 'goobs-frontend';
import { TextField, Box } from '@mui/material';

const DynamicQRCodeExample: React.FC = () => {
  const [qrValue, setQRValue] = useState('');

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setQRValue(event.target.value);
  };

  return (
    <Box>
      <TextField
        label="Enter QR Code Value"
        value={qrValue}
        onChange={handleInputChange}
        fullWidth
        margin="normal"
      />
      {qrValue && (
        <QRCodeComponent
          value={qrValue}
          size={200}
          title="Generated QR Code"
        />
      )}
    </Box>
  );
};

export default DynamicQRCodeExample;

While the basic QRCodeComponent doesn't support adding a logo directly, you can create a wrapper component to overlay a logo on top of the QR code:

import React from 'react';
import { QRCodeComponent } from 'goobs-frontend';
import { Box } from '@mui/material';

interface QRCodeWithLogoProps {
  value: string;
  size: number;
  logoUrl: string;
  logoSize: number;
}

const QRCodeWithLogo: React.FC<QRCodeWithLogoProps> = ({ value, size, logoUrl, logoSize }) => {
  return (
    <Box position="relative" width={size} height={size}>
      <QRCodeComponent value={value} size={size} />
      <Box
        position="absolute"
        top="50%"
        left="50%"
        sx={{
          transform: 'translate(-50%, -50%)',
          width: logoSize,
          height: logoSize,
          backgroundColor: 'white',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <img src={logoUrl} alt="Logo" style={{ maxWidth: '100%', maxHeight: '100%' }} />
      </Box>
    </Box>
  );
};

const QRCodeWithLogoExample: React.FC = () => {
  return (
    <QRCodeWithLogo
      value="https://www.example.com"
      size={250}
      logoUrl="/path/to/your/logo.png"
      logoSize={50}
    />
  );
};

export default QRCodeWithLogoExample;

The QRCode component is designed with accessibility in mind:

• It uses the aria-label attribute to provide a description of the QR code for screen readers.
• The component is properly labeled when a title is provided.

To further enhance accessibility:

1. Provide clear instructions on how to use the QR code.
2. Ensure that any text encoded in the QR code is also available in a readable format for users who can't scan the code.

1. Appropriate Size: Choose a QR code size that is easily scannable on various devices.
2. Clear Value: Ensure the value encoded in the QR code is correct and useful.
3. Error Handling: Implement proper error handling for invalid QR code values.
4. Testing: Test the QR codes with various scanning apps and devices to ensure compatibility.
5. Alternative Access: Always provide an alternative way to access the information encoded in the QR code.

The QRCode component is generally lightweight, but keep in mind:

• For dynamically generated QR codes, consider implementing debouncing to avoid unnecessary re-renders.
• If using many QR codes on a single page, consider lazy loading or virtualization techniques.

1. QR Code Not Displaying: Ensure that the value prop is not empty and contains valid data.
2. Scanning Issues: If the QR code is difficult to scan, try increasing the size or ensuring there's enough contrast with the background.
3. Styling Problems: Check that custom styles applied through the sx prop are not interfering with the QR code rendering.

By leveraging these features and following the best practices, you can effectively use the QRCode component in your goobs-frontend projects to generate and display QR codes for various purposes.