https://github.com/guilhermeasn/react-qrcode-pretty
Qrcode generator for react apps with many customization options.
https://github.com/guilhermeasn/react-qrcode-pretty
pretty qrcode react
Last synced: 8 months ago
JSON representation
Qrcode generator for react apps with many customization options.
- Host: GitHub
- URL: https://github.com/guilhermeasn/react-qrcode-pretty
- Owner: guilhermeasn
- License: mit
- Created: 2022-08-07T19:05:46.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2025-07-12T13:13:25.000Z (11 months ago)
- Last Synced: 2025-09-15T12:42:17.204Z (9 months ago)
- Topics: pretty, qrcode, react
- Language: TypeScript
- Homepage: https://qrcodepretty.gn.dev.br/
- Size: 8.45 MB
- Stars: 27
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-qrcode-pretty
[](https://guilhermeasn.github.io/react-qrcode-pretty/)
[](https://www.npmjs.com/package/react-qrcode-pretty/)
[](https://www.npmjs.com/package/react-qrcode-pretty/v/latest)
Qrcode generator for react apps with many customization options.
[Qrcode generator website](https://guilhermeasn.github.io/react-qrcode-pretty/)
## Installation
Run the command below in the terminal to install **react-qrcode-pretty** in your project
```
npm i react-qrcode-pretty
```
Or with Yarn
```
yarn add react-qrcode-pretty
```
## Resources
- **QrcodeCanvas**: React Element to generate a Qrcode with canvas.
- **QrcodeSVG**: React Element to generate a Qrcode with SVG.
- **useQrcodeDownload**: React Hook to download Qrcode in browser.
## Qrcode Props
|Prop|Type|Default|Details|
|---|---|---|---|
| value | `string` | | Qrcode payload (required) |
| size | `number` | auto | Size of the qrcode without margin and padding |
| color | `string`
`{ 'eyes': string, 'body': string }` | '#000000' | Foreground color for the entire qrcode or for each part (eyes and body) of the qrcode |
| colorEffect | `gradient-dark-vertical`
`gradient-dark-horizontal`
`gradient-dark-diagonal`
`gradient-light-vertical`
`gradient-light-horizontal`
`gradient-light-diagonal`
`colored`
`shades`
`none`
`{ 'eyes': colorEffect, 'body': colorEffect }` | 'none' | Apply effects to coloring |
| mode | `Numeric`
`Alphanumeric`
`Byte`
`Kanji` | 'Byte' | Mode that payload (value) will be logged |
| level | `L`
`M`
`Q`
`H` | 'M' | Error correction level |
| modules | `[0-40]` | 0 | Number of qrcode modules. 0 is auto |
| image | `string`
`{ src: string; width ?: number; height ?: number; positionX ?: number; positionY ?: number; overlap ?: boolean; }` | undefined | Settings for the image to be inserted into the qrcode |
| margin | `number` | 0 | Margin size. Area without background color |
| padding | `number` | 0 | Padding size. Area with background color |
| variant | `standard`
`rounded`
`dots`
`circle`
`fluid`
`reverse`
`shower`
`gravity`
`morse`
`italic`
`inclined`
`{ 'eyes': variant, 'body': variant }` | 'standard' | Style applied to the entire qrcode or each part (eyes and body) of it |
| divider | `boolean` | false | Active a small separation between the qrcode body points |
| bgColor | `string` | '#FFFFFF' | Background color |
| bgRounded | `boolean` | false | Background color rounded |
| internalProps | `HTMLAttributes` | undefined | The internal props attributes |
| onReady | `(element : HTMLCanvasElement \| SVGSVGElements) => void` | undefined | Provides element properties and methods when available. To be used with the useQrcodeDownload hook. |
## Code Example
```js
import {
QrcodeCanvas,
useQrcodeDownload
} from "react-qrcode-pretty";
export function QrcodeCustom({ value = 'react-qrcode-pretty' }) {
const [ setQrcode, download, isReady ] = useQrcodeDownload();
return (
download('qrcode_file_name') }
disabled={ !isReady }
>Download Qrcode
);
}
export default QrcodeCustom;
```
[Try it in the code sandbox](https://codesandbox.io/p/sandbox/tjxv5d)
## Qrcode Examples
[Qrcode generator website](https://guilhermeasn.github.io/react-qrcode-pretty/)
## Author
* **Guilherme Neves** - [github](https://github.com/guilhermeasn/) - [website](https://gn.dev.br/)
## License
This project is under the MIT license - see file [LICENSE](https://github.com/guilhermeasn/react-qrcode-pretty/blob/master/LICENSE) for details.