QR Grid

https://github.com/yadav-saurabh/qrgrid
Admin
QR Grid is a customizable, zero-dependency JavaScript QR code library that provides raw QR data and...
Tokens:36,452
Snippets:355
Trust Score:6.8
License:MIT
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Install globally and run

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/cli/README.md

Installs the CLI globally with npm, then runs it with the 'qrgrid' command. The example encodes 'Hello World'.

```bash
npm install -g @qrgrid/cli

qrgrid -i "Hello World"
```

--------------------------------

### Install @qrgrid/server with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Install the package using bun.

```sh
bun add @qrgrid/server
```

--------------------------------

### Install @qrgrid/server with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Install the package using yarn.

```sh
yarn add @qrgrid/server
```

--------------------------------

### Install @qrgrid/core with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Install the core package using bun.

```sh
bun add @qrgrid/core
```

--------------------------------

### Install @qrgrid/server with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Install the package using npm.

```sh
npm install @qrgrid/server
```

--------------------------------

### Install @qrgrid/server with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Install the package using pnpm.

```sh
pnpm install @qrgrid/server
```

--------------------------------

### Install @qrgrid/vue with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Install the Vue package using bun.

```sh
bun add @qrgrid/vue
```

--------------------------------

### Install @qrgrid/react

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/react/README.md

Installs the @qrgrid/react package from npm.

```bash
npm install @qrgrid/react
```

--------------------------------

### Install @qrgrid/core with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Install the core package using yarn.

```sh
yarn add @qrgrid/core
```

--------------------------------

### Install @qrgrid/styles with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Install the @qrgrid/styles package using bun.

```sh
bun add @qrgrid/styles
```

--------------------------------

### QRGrid CLI usage examples

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Use the CLI without installation. Examples show printing to terminal, saving as SVG, and generating a WiFi QR code.

```bash
# print to terminal
npx @qrgrid/cli -i "Hello World"

# save as SVG
npx @qrgrid/cli -i "https://qrgrid.com" -f qr.svg

# WiFi QR code
npx @qrgrid/cli -i "WIFI:T:WPA;S:MyNetwork;P:MyPassword;;" -f wifi.svg
```

--------------------------------

### Install @qrgrid/server with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the Qr Grid library for server applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/server
```

```sh
bun add @qrgrid/server
```

```sh
pnpm install @qrgrid/server
```

```sh
yarn add @qrgrid/server
```

--------------------------------

### Install @qrgrid/core with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Install the core package using pnpm.

```sh
pnpm install @qrgrid/core
```

--------------------------------

### Install @qrgrid/core with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Install the core package using npm.

```sh
npm install @qrgrid/core
```

--------------------------------

### Install @qrgrid/styles with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Install the @qrgrid/styles package using yarn.

```sh
yarn add @qrgrid/styles
```

--------------------------------

### Install @qrgrid/vue with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Install the Vue package using npm.

```sh
npm install @qrgrid/vue
```

--------------------------------

### Start docs dev server with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/README.md

Starts the VitePress development server for the documentation site, using the @qrgrid/docs filter.

```sh
npm run dev -- --filter @qrgrid/docs
```

--------------------------------

### Install @qrgrid/vue with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Install the Vue package using yarn.

```sh
yarn add @qrgrid/vue
```

--------------------------------

### Install @qrgrid/react with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the Qr Grid library for React applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/react
```

```sh
bun add @qrgrid/react
```

```sh
pnpm install @qrgrid/react
```

```sh
yarn add @qrgrid/react
```

--------------------------------

### Install @qrgrid/styles with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Install the @qrgrid/styles package using npm.

```sh
npm install @qrgrid/styles
```

--------------------------------

### Install @qrgrid/core with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the core Qr Grid library for web applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/core
```

```sh
bun add @qrgrid/core
```

```sh
pnpm install @qrgrid/core
```

```sh
yarn add @qrgrid/core
```

--------------------------------

### Run docs site locally

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Starts the documentation development server at http://localhost:5173.

```bash
cd docs && pnpm dev
```

--------------------------------

### Install @qrgrid/vue with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Install the Vue package using pnpm.

```sh
pnpm install @qrgrid/vue
```

--------------------------------

### Install dependencies with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/README.md

Run this command in the project root to install all required dependencies for the documentation site.

```sh
npm install
```

--------------------------------

### Install @qrgrid/styles with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Install the @qrgrid/styles package using pnpm.

```sh
pnpm install @qrgrid/styles
```

--------------------------------

### Install @qrgrid/angular with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Install the package using bun, a fast JavaScript runtime and package manager.

```sh
bun add @qrgrid/angular
```

--------------------------------

### Install @qrgrid/vue with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the Qr Grid library for Vue applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/vue
```

```sh
bun add @qrgrid/vue
```

```sh
pnpm install @qrgrid/vue
```

```sh
yarn add @qrgrid/vue
```

--------------------------------

### Install @qrgrid/angular with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Install the package using yarn, a popular package manager.

```sh
yarn add @qrgrid/angular
```

--------------------------------

### Install @qrgrid/angular with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Install the package using npm. This is the standard package manager for Node.js.

```sh
npm install @qrgrid/angular
```

--------------------------------

### Install @qrgrid/angular with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the Qr Grid library for Angular applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/angular
```

```sh
bun add @qrgrid/angular
```

```sh
pnpm install @qrgrid/angular
```

```sh
yarn add @qrgrid/angular
```

--------------------------------

### Install @qrgrid/angular with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Install the package using pnpm, a package manager that saves disk space.

```sh
pnpm install @qrgrid/angular
```

--------------------------------

### Clone and build QRGrid with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Use these commands to clone the repository, install dependencies, and build or watch the packages. Requires pnpm >= 10 and Node.js >= 20.

```bash
git clone https://github.com/yadav-saurabh/qrgrid.git
cd qrgrid
pnpm install    # requires pnpm >= 10, Node.js >= 20
pnpm build      # build all packages
pnpm dev        # watch mode
```

--------------------------------

### Generate a simple QR code

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Example of generating a simple QR code using generateQr.

```typescript
import { generateQr } from "@qrgrid/server";

const qr = generateQr("hello world from server");
```

--------------------------------

### Run CLI without global installation using bunx

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Use bunx to run the CLI without installing it globally. The -i flag specifies the input data for the QR code.

```sh
bunx @qrgrid/cli -i "Hello world"
```

--------------------------------

### getNeighbor usage example

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/styles/README.md

Imports getNeighbor from @qrgrid/styles/common and retrieves the state of all 8 neighbors around a module. The returned object contains boolean-like values for each direction, and the example checks for a concave inner corner condition.

```javascript
import { getNeighbor } from "@qrgrid/styles/common";

const neighbors = getNeighbor(i, qr);
// { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight }

if (neighbors.top && neighbors.left && !neighbors.topLeft) {
  // concave inner corner
}
```

--------------------------------

### Run CLI without global installation using npx

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Use npx to run the CLI without installing it globally. The -i flag specifies the input data for the QR code.

```sh
npx @qrgrid/cli -i "Hello world"
```

--------------------------------

### Render QR to canvas with raw data

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Creates a QR instance, draws dark modules on a canvas, and fills the background. Uses qr.data (flat Uint8Array) and qr.gridSize. The example assumes a canvas element with id 'qr'.

```js
import { QR } from "@qrgrid/core";

const qr = new QR("https://qrgrid.com");
const canvas = document.getElementById("qr");
const ctx = canvas.getContext("2d");

// figure out how big each module should be
const size = Math.floor(400 / (qr.gridSize + 1.5));
const border = Math.ceil(size * qr.gridSize - 400) + size * 2;
canvas.height = 400 + border;
canvas.width = 400 + border;

// draw every dark module
ctx.fillStyle = "black";
let x = size,
  y = size;
for (let i = 0; i < qr.data.length; i++) {
  if (qr.data[i]) {
    ctx.fillRect(x, y, size, size);
  }
  x += size;
  if (i % qr.gridSize === qr.gridSize - 1) {
    x = size;
    y += size;
  }
}

// fill the background behind everything
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
```

--------------------------------

### Using CanvasQr component

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Import the CanvasQr component and use the <qr> element with the input property to render a QR code. The example shows encoding "Hello World!".

```typescript
import { CanvasQr } from "@qrgrid/angular";

<qr input="Hello World!"/>
```

--------------------------------

### Run CLI without global installation using pnpm dlx

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Use pnpm dlx to run the CLI without installing it globally. The -i flag specifies the input data for the QR code.

```sh
pnpm dlx @qrgrid/cli -i "Hello world"
```

--------------------------------

### Basic usage of QR class from @qrgrid/core

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/core/README.md

Imports the QR class and creates a new instance with a string. The constructor computes the grid immediately; access properties like data, gridSize, version, errorCorrection, segments, reservedBits, and maskPattern. For example, data is a Uint8Array of 1s and 0s, and gridSize is the number of modules per side (e.g., 25).

```typescript
import { QR } from "@qrgrid/core";

const qr = new QR("Hello World!");

qr.data; // Uint8Array of 1s and 0s
qr.gridSize; // e.g. 25 (meaning 25x25 modules)
qr.version; // QR version used (1-40)
qr.errorCorrection; // "M" by default
qr.segments; // how the input was split into encoding segments
qr.reservedBits; // what each module is (finder pattern, alignment, timing, etc.)
qr.maskPattern; // which mask pattern was applied (0-7)
```

--------------------------------

### getFinderPatternDetails usage example

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/styles/README.md

Imports getFinderPatternDetails from @qrgrid/styles/common and retrieves pixel positions and sizes for the three finder patterns. The returned object contains inner and outer coordinates and sizes, useful for custom finder pattern shapes.

```javascript
import { getFinderPatternDetails } from "@qrgrid/styles/common";

const { positions, sizes } = getFinderPatternDetails(moduleSize, qr);
// positions.inner -> 3 {x, y} coordinates for the inner 3x3 squares
// positions.outer -> 3 {x, y} coordinates for the outer 7x7 squares
// sizes.inner -> pixel size of inner square
// sizes.outer -> pixel size of outer square
```

--------------------------------

### Import and use SvgQr component

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Import SvgQr from @qrgrid/angular and use the <qr> element with the input prop to render a QR code. The example shows a minimal usage with the input set to 'Hello World!'.

```typescript
import { SvgQr } from "@qrgrid/angular";

<qr input="Hello World!"/>
```

--------------------------------

### Basic usage: generateQr returns SVG string

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/server/README.md

Imports generateQr from @qrgrid/server and calls it with a string to get a complete SVG string. The comment indicates the returned value is ready to use.

```js
import { generateQr } from "@qrgrid/server";

const svg = generateQr("Hello World");
// returns a complete SVG string ready to use
```

--------------------------------

### Run @qrgrid/cli with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Run the Qr Grid CLI to generate a QR code for the input 'Hello world'. Choose the command matching your package manager.

```sh
npx @qrgrid/cli -i "Hello world"
```

```sh
bunx @qrgrid/cli -i "Hello world"
```

```sh
pnpm dlx @qrgrid/cli -i "Hello world"
```

```sh
yarn dlx @qrgrid/cli -i "Hello world"
```

--------------------------------

### Build docs with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/README.md

Builds the documentation site for production, using the @qrgrid/docs filter.

```sh
npm run docs:build -- --filter @qrgrid/docs
```

--------------------------------

### Run CLI without global installation using yarn dlx

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Use yarn dlx to run the CLI without installing it globally. The -i flag specifies the input data for the QR code.

```sh
yarn dlx @qrgrid/cli -i "Hello world"
```

--------------------------------

### Download QR code as Canvas

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Shows how to download the QR code as a canvas using downloadQr from @qrgrid/styles/canvas/utils.

```vue
<script>
  import { Qr } from "@qrgrid/vue/canvas";
  import { downloadQr} from "@qrgrid/styles/canvas/utils";

  const qrRef = ref<InstanceType<typeof Qr> | null>(null);

  const download = () => {
    if (qrRef.value?.canvasRef) {
      downloadQr(qrRef.value?.canvasRef);
    }
  };
</script>

<template>
  <Qr input="Hello World!" ref="qrRef" />
</template>
```

--------------------------------

### Generate and display QR code

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Generates a QR code for the input "Hello World" and displays it in the terminal.

```sh
npx @qrgrid/cli -i "Hello World"
```

--------------------------------

### Canvas element for QR rendering

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

HTML canvas element used as the rendering target in the plain HTML example.

```html
<canvas id="qr" width="400" height="400"></canvas>
```

--------------------------------

### Download QR code as Canvas

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/react.md

Shows how to download the QR code as a canvas using downloadQr from @qrgrid/styles/canvas/utils. Requires a ref to the canvas element.

```tsx
import { Qr } from "@qrgrid/react/canvas";
import { downloadQr } from "@qrgrid/styles/canvas/utils";

const qrRef = useRef<HTMLCanvasElement | null>(null);

const download = () => {
  if (qrRef.current) {
    downloadQr(qrRef.current);
  }
};

<Qr input="Hello World!" ref={qrRef} />
```

--------------------------------

### Canvas gradient color function

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/vue/README.md

For Canvas, pass a function that receives the canvas context and returns a gradient. The example creates a linear gradient and uses it as the `color` prop.

```vue
<script setup>
import { Qr } from "@qrgrid/vue/canvas";

function gradientColor(ctx) {
  const gradient = ctx.createLinearGradient(0, 0, 400, 400);
  gradient.addColorStop(0, "#e94560");
  gradient.addColorStop(1, "#0f3460");
  return gradient;
}
</script>

<template>
  <Qr input="Hello World!" :color="gradientColor" />
</template>
```

--------------------------------

### Create a QR instance

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Import the QR class and create a new instance with input data. The default error correction level is 'M'.

```typescript
import { QR } from "@qrgrid/core";

const qr = new QR("Hello World!")
```

--------------------------------

### Access QR component with @ViewChild

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/angular/README.md

Use this snippet to get a reference to the QR component and access the underlying canvas element. This is useful for downloading the QR code as an image.

```typescript
@Component({
  imports: [CanvasQr],
  template: `<qr input="Hello World!" />`,
})
export class MyComponent {
  @ViewChild(CanvasQr) qrComponent!: CanvasQr;

  download() {
    const canvas = this.qrComponent.canvas.nativeElement;
    // use downloadQr from @qrgrid/styles/canvas/utils
  }
}
```

--------------------------------

### Describe changes with changeset

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Run this command to create a changeset describing your change before opening a pull request.

```bash
pnpm changeset
```

--------------------------------

### Gradient fill (Canvas)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Provides a function to the `color` prop to create a linear gradient. The function receives the canvas context and returns a gradient object. This example is for Canvas rendering.

```tsx
<Qr
  input="Hello World"
  color={(ctx) => {
    const gradient = ctx.createLinearGradient(0, 0, 400, 400);
    gradient.addColorStop(0, "#e94560");
    gradient.addColorStop(1, "#0f3460");
    return gradient;
  }}
/>
```

--------------------------------

### Common use cases for @qrgrid/cli

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/cli/README.md

Shows various input types: URL, WiFi network, email, phone, plain text, and error correction options. Includes saving to file with silent mode.

```bash
# URL
npx @qrgrid/cli -i "https://yoursite.com"

# WiFi network (scannable on phones)
npx @qrgrid/cli -i "WIFI:T:WPA;S:MyNetwork;P:MyPassword;;"

# email address
npx @qrgrid/cli -i "mailto:hello@example.com"

# phone number
npx @qrgrid/cli -i "tel:+1234567890"

# plain text
npx @qrgrid/cli -i "Meet me at the coffee shop at 3pm"

# with high error correction
npx @qrgrid/cli -i "Hello World" -ec H

# save to file with custom error correction, no terminal output
npx @qrgrid/cli -i "Hello World" -ec H -f output.svg -s
```

--------------------------------

### Available pnpm scripts

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

List of package manager commands for building, watching, linting, and formatting the project.

```bash
pnpm build
```

```bash
pnpm dev
```

```bash
pnpm lint
```

```bash
pnpm format
```

--------------------------------

### Separate finder and data colors (SVG)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Uses an object for the `color` prop to set different colors for the finder patterns and the codeword (data) modules. This example is for SVG rendering.

```tsx
<Qr input="Hello World" color={{ finder: "#ff3131", codeword: "#173B45" }} />
```

--------------------------------

### React QR component with styling

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Use the Qr component from @qrgrid/react/canvas. The second example shows styling with dotModuleStyle and additional options like bgColor, color, qrOptions, and image.

```tsx
import { Qr } from "@qrgrid/react/canvas";

<Qr input="Hello World!" />;

// or with styling
import { dotModuleStyle } from "@qrgrid/styles/canvas/styles";

<Qr
  input="https://qrgrid.com"
  bgColor="#1a1a2e"
  color="#e94560"
  moduleStyle={dotModuleStyle}
  qrOptions={{ errorCorrection: "H" }}
  image={{ src: "/logo.png", overlap: false }}
/>;
```

--------------------------------

### Download QR code as SVG

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Shows how to download the QR code as an SVG using downloadQr from @qrgrid/styles/svg/utils.

```vue
<script>
  import { Qr } from "@qrgrid/vue/svg";
  import { downloadQr} from "@qrgrid/styles/svg/utils";

  const qrRef = ref<InstanceType<typeof Qr> | null>(null);

  const download = () => {
    if (qrRef.value?.svgRef) {
      downloadQr(qrRef.value?.svgRef);
    }
  };
</script>

<template>
  <Qr input="Hello World!" ref="qrRef" />
</template>
```

--------------------------------

### Generate QR code and save as SVG file

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Generates a QR code for the input "Hello World" and saves it to the specified file path as an SVG file.

```sh
npx @qrgrid/cli -i "Hello World" -f qr.svg
```

--------------------------------

### Generate QR code silently and save to file

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Generates a QR code for the input "Hello World", saves it to the specified file path, and skips printing the QR code to the terminal using the -s flag.

```sh
npx @qrgrid/cli -i "Hello World" -f qr.svg -s
```

--------------------------------

### Custom moduleStyle for Canvas

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/react/README.md

Defines a custom moduleStyle for Canvas. The function receives the canvas context, the module's position and size, and the QR data. The example draws a circle at each module's center.

```tsx
<Qr
  input="Hello World!"
  moduleStyle={(ctx, module, qr) => {
    // module has: index, x, y, size
    // draw whatever you want
    ctx.beginPath();
    ctx.arc(
      module.x + module.size / 2,
      module.y + module.size / 2,
      module.size / 3,
      0,
      Math.PI * 2,
    );
    ctx.fill();
  }}
/>
```

--------------------------------

### Download QR code as SVG

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/react.md

Shows how to download the QR code as an SVG using downloadQr from @qrgrid/styles/svg/utils. Requires a ref to the SVG element.

```tsx
import { Qr } from "@qrgrid/react/svg";
import { downloadQr} from "@qrgrid/styles/svg/utils";

const qrRef = useRef<SVGSVGElement | null>(null);

const download = () => {
  if (qrRef.current) {
    downloadQr(qrRef.current);
  }
};

<Qr input="Hello World!" ref={qrRef} />
```

--------------------------------

### Express API endpoint returning QR SVG

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/server/README.md

Sets up an Express server with a GET /qr route that generates an SVG QR code from a query parameter (defaulting to "Hello World") with size 400 and error correction level H, then sends it as image/svg+xml. The server listens on port 5000.

```js
import { generateQr } from "@qrgrid/server";
import express from "express";

const app = express();

app.get("/qr", (req, res) => {
  const data = req.query.data || "Hello World";
  const svg = generateQr(data, {
    size: 400,
    qrOptions: { errorCorrection: "H" },
  });
  res.set("Content-Type", "image/svg+xml");
  res.send(svg);
});

app.listen(5000);
```

--------------------------------

### new QR(inputData, options?)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/core/README.md

Creates a new QR code instance from the given input data. The optional options object allows specifying the error correction level.

```APIDOC
## `new QR(inputData, options?)`

### Description
Creates a new QR code instance from the given input data. The optional options object allows specifying the error correction level.

### Parameters
- `inputData` (string) - Required - The data to encode.
- `options.errorCorrection` ("L" | "M" | "Q" | "H") - Optional - Error correction level, defaults to "M".

### Returns
A QR instance with properties as described in the Properties section.
```

--------------------------------

### Import QR and types from @qrgrid/core

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/core/README.md

Shows how to import the QR class and its associated types and enums from the @qrgrid/core package. The enums include ErrorCorrectionLevel, Mode, and ReservedBits, with their corresponding type aliases.

```typescript
import {
  QR,
  QrOptions,
  ErrorCorrectionLevel, // { L, M, Q, H }
  ErrorCorrectionLevelType, // "L" | "M" | "Q" | "H"
  Mode, // { Numeric, AlphaNumeric, Byte, Kanji }
  ModeType, // "Numeric" | "AlphaNumeric" | "Byte" | "Kanji"
  ReservedBits, // { FinderPattern, AlignmentPattern, TimingPattern, ... }
  ReservedBitsType, // "FinderPattern" | "AlignmentPattern" | ...
} from "@qrgrid/core";
```

--------------------------------

### Basic QR Code Usage

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Renders a QR code with the default settings using the <qr> component.

```typescript
<qr input="Hello World!" />
```

--------------------------------

### Use built-in dot module style from @qrgrid/styles

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/server/README.md

Imports the dotModuleStyle from @qrgrid/styles/svg/styles and passes it to the moduleStyle option. Requires the @qrgrid/styles package.

```js
import { generateQr } from "@qrgrid/server";
import { dotModuleStyle } from "@qrgrid/styles/svg/styles";

const svg = generateQr("Hello World", {
  moduleStyle: dotModuleStyle,
});
```

--------------------------------

### Custom solid colors and separate finder/data colors

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/vue/README.md

Shows how to set solid background and foreground colors via the `bgColor` and `color` props, and how to specify separate finder and codeword colors using an object (SVG only).

```vue
<!-- solid colors -->
<Qr input="Hello World!" bgColor="#F8EDED" color="#173B45" />

<!-- separate finder and data colors (SVG only) -->
<Qr input="Hello World!" :color="{ finder: '#ff3131', codeword: '#173B45' }" />
```

--------------------------------

### Render QR to SVG path

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Builds an SVG path string from QR data and sets it on a path element. Requires an SVG with id 'qrSvg' and a path with id 'qrPath'.

```js
import { QR } from "@qrgrid/core";

const qr = new QR("https://qrgrid.com");
const svg = document.getElementById("qrSvg");
const pathEl = document.getElementById("qrPath");

const size = Math.floor(400 / (qr.gridSize + 1.5));
const border = Math.ceil(size * qr.gridSize - 400) + size * 2;
const total = 400 + border;

svg.setAttribute("width", total);
svg.setAttribute("height", total);
svg.setAttribute("viewBox", `0 0 ${total} ${total}`);
svg.style.background = "white";

let x = size,
  y = size,
  d = "";
for (let i = 0; i < qr.data.length; i++) {
  if (qr.data[i]) {
    d += `M${x} ${y}v${size}h${size}v-${size}z`;
  }
  x += size;
  if (i % qr.gridSize === qr.gridSize - 1) {
    x = size;
    y += size;
  }
}

pathEl.setAttribute("d", d);
pathEl.setAttribute("fill", "black");
```
Tokens:
Raw