react-qr-hooks

About

Encode & decode QR code in React

Demo

Playground – play with the library in CodeSandbox

Similar Projects

• react-use-qrcode by Paulo Cesar
• react-qr-reader by Thomas Billiet
• qrcode by Ryan Day

How to Install

First, install the library in your project by npm:

$ npm install react-qr-hooks

Or Yarn:

$ yarn add react-qr-hooks

Getting Started

• Import hooks in React application file:

import { useQrEncode, useQrDecode } from 'react-qr-hooks';

useQrEncode

Options

Name	Type	Default	Description
text	string		Text to encode
options	QRCodeToDataURLOptions	{}	Options for qrcode library

Returned Values

Type	Description
string	Encoded value

useQrDecode

Options

Name	Type	Default	Description
data	string		An image from url or an <img> element with a src attribute set
options	object	{}	Options for qrcode-decoder library

Returned Values

Type	Description
string	value decoded from QR code

Example

import React from 'react';
import { useQrEncode, useQrDecode } from 'react-qr-hooks';

const App = () => {
  const encoded = useQrEncode(
    'Hello world!' /* object with options (if needed) */
  );

  const decoded = useQrDecode(encoded /* object with options (if needed) */);

  return (
    <>
      <img src={encoded} alt="My QR code" />
      <p>{decoded}</p>
    </>
  );
};

export default App;

License

This project is licensed under the MIT License © 2020-present Jakub Biesiada