Skip to main content

​
Your First QR Code

Get started with react-qr-code in just a few steps.
1

Import the component

Import the QRCode component into your React or React Native file:
import React from "react";
import QRCode from "react-qr-code";
2

Render the QR code

Add the <QRCode /> component with a 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"));
The value prop is the only required prop and contains the data you want to encode in the QR code.
3

Test it out

Run your application and scan the QR code with your phone’s camera app. It should decode to the text you provided in the value prop.

​
Understanding the Value Prop

The value prop is a string that contains the data to be encoded in the QR code:
  • Can be any text, URL, or data string
  • Supports up to 2953 characters (per the official QR spec)
  • Automatically handles UTF-8 encoding for non-ASCII characters
// URL example
<QRCode value="https://example.com" />

// Text example
<QRCode value="Hello, World!" />

// UTF-8 example (Korean, emoji)
<QRCode value="한글 테스트 😊" />
No additional encoding is required for non-ASCII text. Just pass a normal JavaScript string and react-qr-code will handle the UTF-8 encoding automatically.

​
Important Note: Quiet Zone

If the QR code is likely to appear next to dark objects, you’ll need to wrap it in a light-colored container to preserve the ‘quiet zone’ - the white space around the QR code that helps scanners detect it: 
<div style={{ background: 'white', padding: '16px' }}>
  <QRCode value="your-value-here" />
</div>

​
Next Steps

Now that you have a basic QR code working, explore more features:

Basic Usage

Learn more usage patterns and examples

Styling

Customize colors, size, and make responsive QR codes

API Reference

View all available props and options

React Native

Platform-specific setup and tips

Build docs developers (and LLMs) love

Get started for freeTalk to us