Skip to main content

​
Simple QR Code

The most basic usage of react-qr-code requires only the value prop: 
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
This creates a QR code with default settings:
  • Size: 256×256 pixels
  • Background color: white (#FFFFFF)
  • Foreground color: black (#000000)
  • Error correction level: L (Low)

​
Changing the Value

The value prop accepts any string and can store up to 2,953 characters according to the official QR spec: 
<QRCode value="https://github.com/rosskhanas/react-qr-code" />

​
UTF-8 and Non-ASCII Text

react-qr-code automatically encodes data in UTF-8 byte mode, ensuring non-ASCII text (Korean, Japanese, emoji) renders and scans correctly: 
<QRCode value="한글 테스트 😊" />
No additional encoding is required on your side. The library uses the TextEncoder API internally to handle UTF-8 conversion.

​
Basic Customization

​
Colors

Customize the foreground and background colors using fgColor and bgColor: 
<QRCode
  value="Custom colors"
  fgColor="#1a56db"
  bgColor="#f3f4f6"
/>

​
Size

Adjust the size using the size prop (in pixels): 
<QRCode
  value="Small QR code"
  size={128}
/>

​
Error Correction Level

Choose an error correction level based on your needs: 
<QRCode value="data" level="L" />
Higher error correction levels make QR codes more resilient to damage but increase their complexity.

​
Complete Example

Here’s a complete example with all basic props: 
import React from "react";
import QRCode from "react-qr-code";

function App() {
  return (
    <div>
      <h1>My QR Code</h1>
      <QRCode
        value="https://example.com"
        size={256}
        bgColor="#ffffff"
        fgColor="#000000"
        level="L"
      />
    </div>
  );
}

export default App;

​
Quiet Zone

If the QR code appears next to dark objects, wrap it in a light-colored container to preserve the ‘quiet zone’ (the required border around QR codes): 
<div style={{ background: 'white', padding: '16px' }}>
  <QRCode value="https://example.com" />
</div>
The quiet zone is essential for QR code scanners to correctly identify and read the code. A minimum of 4 modules (squares) is recommended.

Build docs developers (and LLMs) love

Get started for freeTalk to us