https://github.com/galihrivanto/fancy-qr

QR code with customizable styles
https://github.com/galihrivanto/fancy-qr

customizable-qr qr-code qr-code-component

Last synced: 5 months ago
JSON representation

QR code with customizable styles

• Host: GitHub
• URL: https://github.com/galihrivanto/fancy-qr
• Owner: galihrivanto
• License: mit
• Created: 2025-02-09T13:58:14.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-03-09T16:00:57.000Z (about 1 year ago)
• Last Synced: 2025-08-17T19:14:44.074Z (10 months ago)
• Topics: customizable-qr, qr-code, qr-code-component
• Language: TypeScript
• Homepage: https://fancy-qr-preview.vercel.app
• Size: 78.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  
Fancy QR


  ![NPM Version](https://img.shields.io/npm/v/%40galihrivanto%2Ffancy-qr)

  ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/galihrivanto/fancy-qr/build-release.yaml)

  ![GitHub](https://img.shields.io/github/license/galihrivanto/fancy-qr)




  A QR code generator with fancy styles options.



## Why?

I was involved in a project that create QR code editor with a lot of styles options and advanced features. This project is simplified version using basic canvas2d and svg. The abstraction is inspired (copied) from the project.

This project created to be used in [board2share project](https://github.com/galihrivanto/board2share), replacing plain 3rd party qr code generator.

## Installation

```bash

npm install @galihrivanto/fancy-qr

```

## Usage

```ts

import { QRCode } from '@galihrivanto/fancy-qr';

const qr = new QRCode(640);

qr.attachTo(document.getElementById('app') as HTMLElement);

qr.setText('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.');

qr.setOuterFinder({

    shape: 'OuterFinder.Drop',

    fill: {

        type: GradientType.Radial,

        from: 'red',

        to: 'blue'

    }

});

qr.setData({

    shape: 'Data.Circle',

    fill: {

        type: GradientType.Radial,

        from: 'red',

        to: 'blue'

    }

});

```