next-qrcode v2.5.1
next-qrcode
React hooks for generating QR code for your next React apps.
š 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:
npm install next-qrcode --save
next-qrcode is available on yarn as well. It can be installed with the following command:
yarn add next-qrcode --save
š” Canvas
Usage
import React from 'react';
import { useQRCode } from 'next-qrcode';
function App() {
const { Canvas } = useQRCode();
return (
<Canvas
text={'https://github.com/bunlong/next-qrcode'}
options={{
errorCorrectionLevel: 'M',
margin: 3,
scale: 4,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
}}
/>
);
}
export default App;
Canvas props
options
logo
options
š” SVG
Usage
import React from 'react';
import { useQRCode } from 'next-qrcode';
function App() {
const { SVG } = useQRCode();
return (
<SVG
text={'https://github.com/bunlong/next-qrcode'}
options={{
margin: 2,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
}}
/>
);
}
export default App;
SVG props
options
š” Image
Usage
import React from 'react';
import { useQRCode } from 'next-qrcode';
function App() {
const { Image } = useQRCode();
return (
<Image
text={'https://github.com/bunlong/next-qrcode'}
options={{
type: 'image/jpeg',
quality: 0.3,
errorCorrectionLevel: 'M',
margin: 3,
scale: 4,
width: 200,
color: {
dark: '#010599FF',
light: '#FFBF60FF',
},
}}
/>
);
}
export default App;
Image props
options
š 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
šØāš©āš¦ 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.