React-qr-hooks NPM

react-qr-hooks

About

Encode & decode QR code in React

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;