Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/GNURub/ngx-qrcode
https://github.com/GNURub/ngx-qrcode
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/GNURub/ngx-qrcode
- Owner: GNURub
- Created: 2024-09-23T11:49:03.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-12-23T09:02:15.000Z (19 days ago)
- Last Synced: 2024-12-23T09:41:09.490Z (19 days ago)
- Language: TypeScript
- Homepage: https://gnurub.github.io/ngx-qrcode/
- Size: 9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-qrcode - A simple Angular 18+ component to generate QR codes. Based on [react-native-qrcode-skia](https://github.com/enzomanuelmangano/react-native-qrcode-skia) library. (Table of contents / Third Party Components)
README
# ngx-qrcode 🎨
This is a simple Angular +18 component to generate QR codes.
Based on [react-native-qrcode-skia](https://github.com/enzomanuelmangano/react-native-qrcode-skia) library.
## Requirements
- Angular 18, 19
## Installation
```sh
npm i -S @gnurub/ngx-qrcode
```
or
```sh
ng add @gnurub/ngx-qrcode
```
## Usage
You might need a very simple QRCode component in your app and you can achieve that by using the basic props (value and size). Here is an example:
```tsx
import { QRCodeComponent } from "@gnurub/ngx-qrcode";
@Component({
selector: "app-root",
imports: [QRCodeComponent],
template: ` `,
})
export class AppComponent {}
```
With Logo
```tsx
import { QRCodeComponent, QRLogoDirective } from "@gnurub/ngx-qrcode";
@Component({
selector: "app-root",
imports: [QRCodeComponent, QRLogoDirective],
template: ` ... | ![]()
`,
})
export class AppComponent {}
```
## Props QRCodeComponent
- `value` (string) - The value encoded in the QRCode.
- `errorCorrectionLevel` (ErrorCorrectionLevelType, optional) - The error correction level for the QRCode. Level L: 7%, level M: 15%, level Q: 25%, level H: 30%. Default value is 'H'.
- `strokeWidth` (number, optional) - The percentage of the strokeWidth (0 to 1). Default value is 1.
- `pathStyle` ('fill' | 'stroke', optional) - The style of the QRCode path: 'fill' or 'stroke'. Default value is 'stroke'.
- `padding` (number, optional) - The padding applied around the QRCode. Default value is 0.
- `size` (number) - The size of the QRCode.
- `shape` (Shape, optional) - The shape of the QR code elements. Can be 'square', 'circle', 'rounded', 'diamond', 'triangle', or 'star'. Default is 'rounded'.
- `gap` (number, optional) - The gap between QR code elements. Default is 0.
- `eyeShape` (Shape, optional) - The shape of the eye patterns. Can be 'square', 'circle', 'rounded', 'diamond', 'triangle', or 'star'. Default is 'rounded'.
- `eyeGap` (number, optional) - The gap in the eye patterns. Default is 0.
## Props QRLogoDirective
- `logoAreaSize` (number, optional) - The size of the logo area within the QRCode.
## License
MIT
---