A cat sitting on a desk, surrounded by laptops and a QR code generator.

Generating QR Codes with React-qr-code

The Gray Cat
The Gray Cat

In this article, we’ll explore the react-qr-code library, a powerful tool for generating QR codes in your React applications. Whether you’re building a web application or a mobile app with React Native, this library provides a simple and flexible way to add QR code functionality to your project.

Installation

To get started, you’ll need to install the react-qr-code library using npm or yarn:

npm i react-qr-code

When using this library with React Native, you’ll also need to install react-native-svg:

npm i react-native-svg
cd ios && pod install

Basic Usage

Let’s start with a simple example of generating a QR code. We’ll use the QRCode component from the library and pass in a value to generate the QR code:

import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));

This will render a QR code with the value “hey” in the container with the id “Container”.

Advanced Usage

Now, let’s take a look at some more advanced usage examples. For instance, you can customize the appearance of the QR code by setting the bgColor and fgColor props:

import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(
  <QRCode
    value="hey"
    bgColor="#FF0000"
    fgColor="#000000"
  />,
  document.getElementById("Container")
);

This will render a QR code with a red background and black foreground.

You can also set the level prop to specify the error correction level of the QR code:

import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(
  <QRCode
    value="hey"
    level="H"
  />,
  document.getElementById("Container")
);

This will render a QR code with a high error correction level.

Conclusion

In this article, we’ve explored the react-qr-code library and its basic and advanced usage examples. Whether you’re building a web application or a mobile app with React Native, this library provides a simple and flexible way to add QR code functionality to your project. With its customizable appearance and error correction options, you can create QR codes that meet your specific needs.

Comments