JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 151
  • Score
    100M100P100Q77428F
  • License MIT

Encode & decode QR code in React

Package Exports

  • react-qr-hooks

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-qr-hooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-qr-hooks

NPM version NPM downloads

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;

License

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