react-qr-code

What is react-qr-code?

The react-qr-code npm package is a simple and efficient library for generating QR codes in React applications. It allows developers to easily create QR codes by providing a URL or text string, which can then be rendered as a QR code image in the application.

What are react-qr-code's main functionalities?

Basic QR Code Generation

This feature allows you to generate a basic QR code by providing a URL or text string. The QR code is rendered as an image in the React component.

import React from 'react';
import QRCode from 'react-qr-code';

const App = () => {
  return (
    <div>
      <QRCode value="https://example.com" />
    </div>
  );
};

export default App;

Customizing QR Code Size

This feature allows you to customize the size of the QR code by specifying the 'size' prop. The QR code will be rendered with the specified dimensions.

import React from 'react';
import QRCode from 'react-qr-code';

const App = () => {
  return (
    <div>
      <QRCode value="https://example.com" size={256} />
    </div>
  );
};

export default App;

Customizing QR Code Colors

This feature allows you to customize the foreground and background colors of the QR code by specifying the 'fgColor' and 'bgColor' props.

import React from 'react';
import QRCode from 'react-qr-code';

const App = () => {
  return (
    <div>
      <QRCode value="https://example.com" fgColor="#0000ff" bgColor="#ffffff" />
    </div>
  );
};

export default App;

Other packages similar to react-qr-code

qrcode.react

qrcode.react is another popular React library for generating QR codes. It offers similar functionality to react-qr-code, including the ability to customize the size and colors of the QR code. However, qrcode.react provides additional features such as error correction levels and support for rendering QR codes as SVG elements.

react-qr-svg

react-qr-svg is a React component for generating QR codes as SVG elements. It provides similar functionality to react-qr-code but focuses on rendering QR codes as scalable vector graphics (SVG). This can be beneficial for applications that require high-quality, scalable QR codes.

react-qr

react-qr is a lightweight React component for generating QR codes. It offers basic QR code generation functionality similar to react-qr-code but with fewer customization options. It is suitable for simple use cases where minimal configuration is needed.

README

react-qr-code

A component for React. This library works with React and React Native (using React Native SVG).

Screenshots

Web

Android & iOS

Installation

yarn add react-qr-code

When using this library with React Native, you will also need to have react-native-svg installed.

yarn add react-native-svg
cd ios && pod install

The Gist

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

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

API

prop	type	default value
bgColor	string	'#FFFFFF'
fgColor	string	'#000000'
level	string ('L' 'M' 'Q' 'H')	'L'
size	number	256
title	string
value	string

License

MIT