npm package: @synapxlab/qrcode
Description: Zero-dependency QR code generator — SVG output, TypeScript, ESM + CJS
Author: SynapxLab
Latest version: 1.0.0

# @synapxlab/qrcode

Zero-dependency QR code generator with SVG output. TypeScript-first, works in the browser and Node.js, ships as both ESM and CJS.

> **[Live demo](https://synapx.fr/sdk/Qrcode/)** · **[Français](#français)**

---

## Installation

```bash
npm install @synapxlab/qrcode
```

## Usage

```typescript
import { QRCode } from '@synapxlab/qrcode';

// Returns an SVG string — inject it directly into the DOM
const svg = QRCode.toSVG('https://example.com');
document.getElementById('qr')!.innerHTML = svg;
```

## API

### `QRCode.toSVG(text, options?)`

| Parameter | Type | Description |
|-----------|------|-------------|
| `text` | `string` | Text or URL to encode |
| `options` | `QRCodeOptions` | Optional settings (see below) |

**Returns** `string` — an inline SVG element.

### `QRCodeOptions`

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `size` | `number` | `200` | Width and height of the SVG in pixels |
| `margin` | `number` | `4` | Quiet zone in modules around the QR code |
| `errorCorrection` | `'L' \| 'M' \| 'Q' \| 'H'` | `'M'` | Error correction level |
| `color` | `string` | `'#000000'` | Dark module colour (any CSS colour) |
| `background` | `string` | `'#ffffff'` | Background colour (any CSS colour) |

Error correction levels: **L** = 7 %, **M** = 15 %, **Q** = 25 %, **H** = 30 % of data recoverable.

## Examples

```typescript
// Custom size and colours
QRCode.toSVG('https://synapxlab.com', {
  size: 300,
  color: '#1a1a1a',
  background: '#f5f5f5',
});

// High error correction with extra quiet zone
QRCode.toSVG('Hello World', {
  errorCorrection: 'H',
  margin: 6,
});

// Transparent background
QRCode.toSVG('https://example.com', {
  background: 'transparent',
});
```

## TypeScript

Full types are included. Import the options interface if needed:

```typescript
import { QRCode, type QRCodeOptions } from '@synapxlab/qrcode';

const opts: QRCodeOptions = { size: 256, errorCorrection: 'Q' };
const svg = QRCode.toSVG('Hello', opts);
```

## Integration with @synapxlab/wysiwyg

Inject `QRCode` as a dependency so the editor can insert QR codes from its toolbar:

```typescript
import { WysiwygEditor } from '@synapxlab/wysiwyg';
import { QRCode } from '@synapxlab/qrcode';

new WysiwygEditor('#editor', {
  qrcode: QRCode,
  toolbar: { qrcode: true },
});
```

## Compatibility

- **Browsers:** all modern browsers (Chrome, Firefox, Safari, Edge)
- **Node.js:** ≥ 18
- **TypeScript:** 5 and 6
- **Module formats:** ESM (`import`) and CJS (`require`)
- **Dependencies:** none

## License

MIT © [SynapxLab](https://github.com/synapxLab)

---

<a name="français"></a>

# @synapxlab/qrcode — Documentation française

> **[Démo live](https://synapx.fr/sdk/Qrcode/)**

Générateur de QR codes sans dépendance, sortie SVG. TypeScript natif, compatible navigateur et Node.js, livré en ESM et CJS.

---

## Installation

```bash
npm install @synapxlab/qrcode
```

## Utilisation

```typescript
import { QRCode } from '@synapxlab/qrcode';

// Retourne une chaîne SVG — à injecter directement dans le DOM
const svg = QRCode.toSVG('https://example.com');
document.getElementById('qr')!.innerHTML = svg;
```

## API

### `QRCode.toSVG(text, options?)`

| Paramètre | Type | Description |
|-----------|------|-------------|
| `text` | `string` | Texte ou URL à encoder |
| `options` | `QRCodeOptions` | Options facultatives (voir ci-dessous) |

**Retourne** `string` — un élément SVG inline.

### `QRCodeOptions`

| Option | Type | Défaut | Description |
|--------|------|--------|-------------|
| `size` | `number` | `200` | Largeur et hauteur du SVG en pixels |
| `margin` | `number` | `4` | Zone de silence en modules autour du QR code |
| `errorCorrection` | `'L' \| 'M' \| 'Q' \| 'H'` | `'M'` | Niveau de correction d'erreur |
| `color` | `string` | `'#000000'` | Couleur des modules sombres (toute couleur CSS) |
| `background` | `string` | `'#ffffff'` | Couleur du fond (toute couleur CSS) |

Niveaux de correction d'erreur : **L** = 7 %, **M** = 15 %, **Q** = 25 %, **H** = 30 % de données récupérables.

## Exemples

```typescript
// Taille et couleurs personnalisées
QRCode.toSVG('https://synapxlab.com', {
  size: 300,
  color: '#1a1a1a',
  background: '#f5f5f5',
});

// Correction d'erreur élevée avec marge généreuse
QRCode.toSVG('Hello World', {
  errorCorrection: 'H',
  margin: 6,
});

// Fond transparent
QRCode.toSVG('https://example.com', {
  background: 'transparent',
});
```

## TypeScript

Les types sont inclus. Importez l'interface des options si besoin :

```typescript
import { QRCode, type QRCodeOptions } from '@synapxlab/qrcode';

const opts: QRCodeOptions = { size: 256, errorCorrection: 'Q' };
const svg = QRCode.toSVG('Hello', opts);
```

## Intégration avec @synapxlab/wysiwyg

Injectez `QRCode` comme dépendance pour que l'éditeur puisse insérer des QR codes depuis sa barre d'outils :

```typescript
import { WysiwygEditor } from '@synapxlab/wysiwyg';
import { QRCode } from '@synapxlab/qrcode';

new WysiwygEditor('#editor', {
  qrcode: QRCode,
  toolbar: { qrcode: true },
});
```

## Compatibilité

- **Navigateurs :** tous les navigateurs modernes (Chrome, Firefox, Safari, Edge)
- **Node.js :** ≥ 18
- **TypeScript :** 5 et 6
- **Formats de module :** ESM (`import`) et CJS (`require`)
- **Dépendances :** aucune

## Licence

MIT © [SynapxLab](https://github.com/synapxLab)