https://github.com/cool-hooks/react-qr-hooks
📱 Encode & decode QR code in React
https://github.com/cool-hooks/react-qr-hooks
decoder encoder hooks library qrcode react
Last synced: about 1 year ago
JSON representation
📱 Encode & decode QR code in React
- Host: GitHub
- URL: https://github.com/cool-hooks/react-qr-hooks
- Owner: cool-hooks
- License: mit
- Created: 2019-12-19T19:07:59.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T17:35:33.000Z (over 3 years ago)
- Last Synced: 2023-09-20T11:54:11.100Z (almost 3 years ago)
- Topics: decoder, encoder, hooks, library, qrcode, react
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-qr-hooks-7iv35
- Size: 1.75 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# [react-qr-hooks](https://github.com/cool-hooks/react-qr-hooks)
[](https://www.npmjs.com/package/react-qr-hooks)
[](https://www.npmjs.com/package/react-qr-hooks)
[](https://www.npmjs.com/package/react-qr-hooks)
[](https://codecov.io/gh/cool-hooks/react-qr-hooks)
[](https://travis-ci.org/cool-hooks/react-qr-hooks)
[](https://bundlephobia.com/result?p=react-qr-hooks)
## About
Encode & decode QR code in React
### Demo
**[Playground – play with the library in CodeSandbox](https://codesandbox.io/s/react-qr-hooks-7iv35)**
### Similar Projects
- [react-use-qrcode](https://github.com/pocesar/react-use-qrcode/) by [Paulo Cesar](https://github.com/pocesar/)
- [react-qr-reader](https://github.com/JodusNodus/react-qr-reader/) by [Thomas Billiet](https://github.com/JodusNodus/)
- [qrcode](https://github.com/soldair/node-qrcode/) by [Ryan Day](https://github.com/soldair/)
## How to Install
First, install the library in your project by npm:
```sh
$ npm install react-qr-hooks
```
Or Yarn:
```sh
$ yarn add react-qr-hooks
```
## Getting Started
**• Import hooks in React application file:**
```js
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 `![]()
` element with a src attribute set |
| **options** | object | `{}` | Options for `qrcode-decoder` library |
#### Returned Values
| Type | Description |
| ------ | -------------------------- |
| string | value decoded from QR code |
## Example
```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 (
<>
{decoded}
>
);
};
export default App;
```
## License
This project is licensed under the MIT License © 2020-present Jakub Biesiada