Build a React.js QRCode Generator From Text & Export to PNG Image Using qrcode-react in TailwindCSS

npm i qrcode.react

Now we need to make the App.tsx file and copy paste the below code

App.tsx

import React, { useState, useRef, useEffect } from 'react';
import { QRCodeCanvas } from 'qrcode.react';

const QRCodeGenerator = () => {
  
  const [text, setText] = useState('https://example.com');
  const [size, setSize] = useState(256);
  const [bgColor, setBgColor] = useState('#FFFFFF');
  const [fgColor, setFgColor] = useState('#000000');
  const [includeMargin, setIncludeMargin] = useState(true);
  const [qrCodeKey, setQrCodeKey] = useState(0);
  const qrRef = useRef();

  // Re-render QR code when settings change
  useEffect(() => {
    setQrCodeKey(prevKey => prevKey + 1);
  }, [text, size, bgColor, fgColor, includeMargin]);

  const handleTextChange = (e) => {
    setText(e.target.value);
  };

  const handleSizeChange = (e) => {
    setSize(Number(e.target.value));
  };

  const handleBgColorChange = (e) => {
    setBgColor(e.target.value);
  };

  const handleFgColorChange = (e) => {
    setFgColor(e.target.value);
  };

  const toggleMargin = () => {
    setIncludeMargin(!includeMargin);
  };

  const downloadQRCode = () => {
    const canvas = document.getElementById('qrcode');
    if (canvas) {
      const pngUrl = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');
      
      const downloadLink = document.createElement('a');
      downloadLink.href = pngUrl;
      downloadLink.download = `qrcode-${text.substring(0, 20)}.png`;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    }
  };

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg">
      <h1 className="text-2xl font-bold text-center mb-6">QR Code Generator</h1>
      
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="text-input">
          Enter text or URL
        </label>
        <input
          id="text-input"
          type="text"
          value={text}
          onChange={handleTextChange}
          placeholder="Enter text or URL"
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        />
      </div>
      
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          QR Code Size: {size}px
        </label>
        <input
          type="range"
          min="128"
          max="512"
          step="8"
          value={size}
          onChange={handleSizeChange}
          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
        />
      </div>
      
      <div className="flex mb-4">
        <div className="w-1/2 pr-2">
          <label className="block text-gray-700 text-sm font-bold mb-2">
            Background Color
          </label>
          <input
            type="color"
            value={bgColor}
            onChange={handleBgColorChange}
            className="w-full h-8 cursor-pointer rounded border"
          />
        </div>
        <div className="w-1/2 pl-2">
          <label className="block text-gray-700 text-sm font-bold mb-2">
            QR Code Color
          </label>
          <input
            type="color"
            value={fgColor}
            onChange={handleFgColorChange}
            className="w-full h-8 cursor-pointer rounded border"
          />
        </div>
      </div>
      
      <div className="mb-6 flex items-center">
        <input
          id="include-margin"
          type="checkbox"
          checked={includeMargin}
          onChange={toggleMargin}
          className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
        />
        <label htmlFor="include-margin" className="ml-2 text-sm font-medium text-gray-700">
          Include Margin
        </label>
      </div>
      
      <div className="flex flex-col items-center mb-6">
        <div className="p-4 bg-gray-100 rounded-lg">
          <QRCodeCanvas
            id="qrcode"
            key={qrCodeKey}
            value={text}
            size={size}
            bgColor={bgColor}
            fgColor={fgColor}
            level="H"
            includeMargin={includeMargin}
            ref={qrRef}
          />
        </div>
      </div>
      
      <div className="flex justify-center">
        <button
          onClick={downloadQRCode}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300"
        >
          Download PNG
        </button>
      </div>
    </div>
  );
};

export default QRCodeGenerator;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

import React, { useState, useRef, useEffect } from 'react';

import { QRCodeCanvas } from 'qrcode.react';

const QRCodeGenerator = () => {

const [text, setText] = useState('https://example.com');

const [size, setSize] = useState(256);

const [bgColor, setBgColor] = useState('#FFFFFF');

const [fgColor, setFgColor] = useState('#000000');

const [includeMargin, setIncludeMargin] = useState(true);

const [qrCodeKey, setQrCodeKey] = useState(0);

const qrRef = useRef();

// Re-render QR code when settings change

useEffect(() => {

setQrCodeKey(prevKey => prevKey + 1);

}, [text, size, bgColor, fgColor, includeMargin]);

const handleTextChange = (e) => {

setText(e.target.value);

};

const handleSizeChange = (e) => {

setSize(Number(e.target.value));

};

const handleBgColorChange = (e) => {

setBgColor(e.target.value);

};

const handleFgColorChange = (e) => {

setFgColor(e.target.value);

};

const toggleMargin = () => {

setIncludeMargin(!includeMargin);

};

const downloadQRCode = () => {

const canvas = document.getElementById('qrcode');

if (canvas) {

const pngUrl = canvas

.toDataURL('image/png')

.replace('image/png', 'image/octet-stream');

const downloadLink = document.createElement('a');

downloadLink.href = pngUrl;

downloadLink.download = `qrcode-${text.substring(0, 20)}.png`;

document.body.appendChild(downloadLink);

downloadLink.click();

document.body.removeChild(downloadLink);

}

};

return (

<h1 className="text-2xl font-bold text-center mb-6">QR Code Generator</h1>

Enter text or URL

</label>

<input

id="text-input"

type="text"

value={text}

onChange={handleTextChange}

placeholder="Enter text or URL"

className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

</div>

QR Code Size: {size}px

</label>

<input

type="range"

min="128"

max="512"

step="8"

value={size}

onChange={handleSizeChange}

className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"

</div>

Background Color

</label>

<input

type="color"

value={bgColor}

onChange={handleBgColorChange}

className="w-full h-8 cursor-pointer rounded border"

</div>

QR Code Color

</label>

<input

type="color"

value={fgColor}

onChange={handleFgColorChange}

className="w-full h-8 cursor-pointer rounded border"

</div>

<input

id="include-margin"

type="checkbox"

checked={includeMargin}

onChange={toggleMargin}

className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"

Include Margin

</label>

</div>

<QRCodeCanvas

id="qrcode"

key={qrCodeKey}

value={text}

size={size}

bgColor={bgColor}

fgColor={fgColor}

level="H"

includeMargin={includeMargin}

ref={qrRef}

</div>

<button

onClick={downloadQRCode}

className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300"

Download PNG

</button>

</div>

);

};

export default QRCodeGenerator;

Build a React.js QRCode Generator From Text & Export to PNG Image Using qrcode-react in TailwindCSS

Comments

Leave a Reply Cancel reply

Archives