wojtekmaj / react-qr-svg

Render QR codes as SVG in your React app.

React-QR-SVG

Render QR codes as SVG in your React app.

tl;dr

• Install by executing npm install @wojtekmaj/react-qr-svg or yarn add @wojtekmaj/react-qr-svg.
• Import by adding import QrSvg from '@wojtekmaj/react-qr-svg'.
• Use by adding <QrSvg value="Hello world" />.

Demo

A minimal demo page can be found in sample directory.

Getting started

Compatibility

Your project needs to use React 16.8 or later.

Need library for React Native? Check out React-Native-QR-SVG.

Installation

Add React-QR-SVG to your project by executing npm install @wojtekmaj/react-qr-svg or yarn add @wojtekmaj/react-qr-svg.

Usage

Here's an example of basic usage:

import QrSvg from '@wojtekmaj/react-qr-svg';

function MyApp() {
  return (
    <div>
      <QrSvg value="Hello world" />
    </div>
  );
}

Check the sample directory in this repository for a full working example.

User guide

QrSvg

Renders QR code as SVG.

Props

Prop name	Description	Default value	Example values
bgColor	Background color.	"white"	Color name: "beige" Color hex: "#fefefe"
cellClassPrefix	Cell class name prefix.	""	"qr-svg__cell"
fgColor	Foreground color.	"black"	Color name: "black" Color hex: "#000000"
level	Error correction level. Can be "L", "M", "Q" and "H".	"L"	"M"
margin	Margin in pixels.	0	4
type	Type (size). Can be any number from 0 to 40. Set to 0 or leave as undefined to use the smallest possible size.	0	10
value	Value to render.	n/a	"Hello world"

You can also specify all the props that are valid for the <svg> React element (e.g. style, className or width).

License

The MIT License.

Author

Wojciech Maj

Thank you

This project wouldn't be possible without the awesome work of Dan Homola [e-mail] who created its original version.