next-qrcode
v2.5.1TypeScript
React hooks for generating QR code for your next React apps.
0/weekUpdated 2 years agoMITUnpacked: 21.5 KB
Published by Bunlong
npm install next-qrcodenext-qrcode
React hooks for generating QR code for your next React apps.
 
 !npm bundle size 
š Features
* Render Canvas, SVG and Image
* Support Numeric, Alphanumeric, Kanji and Byte mode
* Support Japanese, Chinese, Greek and Cyrillic characters
* Support multibyte characters (like emojis smile)
š§ Install
next-qrcode is available on npm. It can be installed with the following command:
``js`
npm install next-qrcode --save
next-qrcode is available on yarn as well. It can be installed with the following command:
`js`
yarn add next-qrcode --save
š” Canvas
$3
`js
import React from 'react';
import { useQRCode } from 'next-qrcode';
function App() {
const { Canvas } = useQRCode();
return (
options={{
errorCorrectionLevel: 'M',
margin: 3,
scale: 4,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
}}
/>
);
}
export default App;
`
$3
| Prop | Type | Require | Description |
|---|---|---|---|
| text | string | āļø | Text/URL to encode. |
| options | options | ā | QR code options. |
| logo | logo | ā | QR code logo. |
$3
| Prop | Type | Default | Require | Description |
|---|---|---|---|---|
| errorCorrectionLevel | 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). |
$3
| Prop | Type | Require | Description |
|---|---|---|---|
| src | string | āļø | The path to the image. |
| options | options | ā | Logo options. |
$3
| Prop | Type | Default | Require | Description |
|---|---|---|---|---|
| width | number | ā | Logo dimension. | |
| x | number | ā | If none or undefined, will center. | |
| y | number | ā | If none or undefined, will center. |
š” SVG
$3
`js
import React from 'react';
import { useQRCode } from 'next-qrcode';
function App() {
const { SVG } = useQRCode();
return (
options={{
margin: 2,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
}}
/>
);
}
export default App;
`
$3
| Prop | Type | Require | Description |
|---|---|---|---|
| text | string | āļø | Text/URL to encode. |
| options | options | ā | QR code options. |
$3
| Prop | Type | Default | Require | Description |
|---|---|---|---|---|
| margin | number | 4 | ā | Define how much wide the quiet zone should be. |
| 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
$3
`js
import React from 'react';
import { useQRCode } from 'next-qrcode';
function App() {
const { Image } = useQRCode();
return (
options={{
type: 'image/jpeg',
quality: 0.3,
errorCorrectionLevel: 'M',
margin: 3,
scale: 4,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
}}
/>
);
}
export default App;
`
$3
| Prop | Type | Require | Description |
|---|---|---|---|
| text | string | āļø | Text/URL to encode. |
| options | object | ā | QR code options |
$3
| 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. |
| errorCorrectionLevel | 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). |
š Changelog
Latest version 2.5.1 (2023-08-01):
* Upgrade QRCode options API
Details changes for each release are documented in the CHANGELOG.md.
ā Issues
If you think any of the next-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 next-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
š Contributors
 Bunlong |  Michael Desa |  Jared Scheib |  Mehrdad MotaghiFar |
šØāš©āš¦ Advertisement
You maybe interested.
* React Patterns ā React patterns & techniques to use in development for React Developer.
* React Papaparse ā The fastest in-browser CSV (or delimited text) parser for React.
* Next Share ā Social media share buttons for your next React apps.
* Next Time Ago ā A lightweight tiny time-ago component for your next React apps.
āļø License
The MIT License 