react-qr-hooks
Version:
Encode & decode QR code in React
75 lines (57 loc) • 1.74 kB
Markdown
[](https://www.npmjs.com/package/react-qr-hooks)
[](https://www.npmjs.com/package/react-qr-hooks)
Encode & decode QR code in React
First, install the library in your project by npm:
```sh
$ npm install react-qr-hooks
```
Or Yarn:
```sh
$ yarn add react-qr-hooks
```
**• Import hooks in React application file:**
```js
import { useQrEncode, useQrDecode } from 'react-qr-hooks';
```
Name | Type | Default | Description
-|-|-|-
**text** | string | ` ` | Text to encode
**options** | QRCodeToDataURLOptions | `{}` | Options for `qrcode` library
Type | Description
-|-
string | Encoded value
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
Type | Description
-|-
string | value decoded from QR code
```js
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;
```
This project is licensed under the MIT License © 2020-present Jakub Biesiada