react-hook-qrcode
React hooks for generating QR code.
? Features
- Render as Canvas & Image
- Support Numeric, Alphanumeric, Kanji and Byte mode
- Support Japanese, Chinese, Greek and Cyrillic characters
- Support multibyte characters (like emojis smile)
? Install
react-hook-qrcode is available on npm. It can be installed with the following command:
npm install --save react-hook-qrcode
react-hook-qrcode is available on yarn as well. It can be installed with the following command:
yarn add react-hook-qrcode
? Canvas
usage
import React from 'react';
import { useQRCode } from 'react-hook-qrcode';
function App() {
const [inputRef] = useQRCode({
text: 'https://github.com/bunlong/react-hook-qrcode',
options: {
level: 'M',
margin: 7,
scale: 1,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
},
});
return <canvas ref={inputRef} />;
};
export default App;
parameters
Prop | Type | Require | Description |
---|---|---|---|
text | string | ✔️ | Text/URL to encode. |
options | options | ❌ | QR code options. |
options
Prop | Type | Default | Require | Description |
---|---|---|---|---|
level | string | M |
❌ | Correction level. Possible values are low , medium , quartile , high or L , M , Q , H . |
margin | number | 4 |
❌ | Define how much wide the quiet zone should be. |
scale | number | 4 |
❌ | Scale factor. A value of 1 means 1px per modules (black dots). |
width | number | 4 |
❌ | Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over scale . |
color.dark | string | #000000ff |
❌ | Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than color.light . |
color.light | string | #ffffffff |
❌ | Color of light module. Value must be in hex format (RGBA). |
? Image
usage
import React from 'react';
import { useQRCode } from 'react-hook-qrcode';
function App() {
const [inputRef] = useQRCode({
text: 'https://github.com/bunlong/react-hook-qrcode',
options: {
type: 'image/jpeg',
quality: 0.3,
level: 'M',
margin: 3,
scale: 4,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
},
});
return <img ref={inputRef} />;
};
export default App;
parameters
Prop | Type | Require | Description |
---|---|---|---|
text | string | ✔️ | Text/URL to encode. |
options | object | ❌ | QR code options |
options
Prop | Type | Default | Require | Description |
---|---|---|---|---|
type | string (image/png , image/jpeg , image/webp ) |
image/png |
❌ | Image format. |
quality | number | 0.92 |
❌ | A Number between 0 and 1 indicating image quality if the type is image/jpeg or image/webp . |
level | string | M |
❌ | Correction level. Possible values are low , medium , quartile , high or L , M , Q , H . |
margin | number | 4 |
❌ | Define how much wide the quiet zone should be. |
scale | number | 4 |
❌ | Scale factor. A value of 1 means 1px per modules (black dots). |
width | number | 4 |
❌ | Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over scale . |
color.dark | string | #000000ff |
❌ | Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than color.light . |
color.light | string | #ffffffff |
❌ | Color of light module. Value must be in hex format (RGBA). |
? Wrap Up
If you think any of the react-hook-qrcode
can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
? Contribution
We'd love to have your helping hand on contributions to react-hook-qrcode
by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
How to contribute:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback