QRCode not showing correctly. #702

kobe651jp · 2023-06-08T01:55:22Z

kobe651jp
Jun 8, 2023

I'm trying to use qrcode.react to generate a QR code and send an email.

Sending emails is working, but I can't see the QR code in my browser.

Anyone with experience please advise.

My code as follows

'use client';

import React, { useState } from 'react';
import { Head } from '@react-email/head';
import { Html } from '@react-email/html';
import { Section } from '@react-email/section';
import { Preview } from '@react-email/preview';
import { render } from '@react-email/render';
import { Tailwind } from '@react-email/tailwind';

import clsx from 'clsx';
import { QRCodeSVG } from 'qrcode.react';

export default function Mail(props) {


  const MyTemplate = (
    <Html>
      <Head />
      <Preview>QR-Code</Preview>
      <Tailwind>
        <Section>
          <QRCodeSVG
            value={'https://xxx.xxx.jp/'}
            renderAs='svg'
            size={192}
            bgColor={'#ffffff'}
            fgColor={'#000000'}
            level={'M'}
            includeMargin={false}
          />
        </Section>
      </Tailwind>
    </Html>
  );
  return (
    <div className='lg:grid lg:grid-cols-12 lg:gap-x-5'>
      <aside className='py-6 px-2 sm:px-6 lg:col-span-3 lg:py-3 lg:px-4 border-r'>
        <nav className='space-y-1'>
          <div
            className={clsx('group flex cursor-pointer items-center rounded-md p-2 text-sm font-medium')}
            onClick={() => {
              const html = render(MyTemplate);
              console.log('html', html);
            }}
          >
            <button
              type='submit'
              className='btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap'
            >
              Send -&gt;
            </button>
          </div>
        </nav>
      </aside>

      <div className='p-3'>{MyTemplate}</div>
    </div>
  );
}

kobe651jp · 2023-06-12T00:09:50Z

kobe651jp
Jun 12, 2023
Author

I have resolved this issue myself.

Changed to use node-qrcode. node-qrcode converts the QR code to base64 and displays it.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

QRCode not showing correctly. #702

{{title}}

Replies: 1 comment

{{title}}

Select a reply

QRCode not showing correctly. #702

kobe651jp Jun 8, 2023

Replies: 1 comment

kobe651jp Jun 12, 2023 Author

kobe651jp
Jun 8, 2023

kobe651jp
Jun 12, 2023
Author