@foxford/qr-code 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.mdx +78 -0
- package/index.cjs +1438 -0
- package/index.js +1403 -0
- package/package.json +40 -0
package/README.mdx
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# QRCode — Генератор QR-кодов
|
|
2
|
+
|
|
3
|
+
## Описание
|
|
4
|
+
|
|
5
|
+
Внутри компонента используется **QRService** — сервис для генерации QR-кодов в Canvas на базе [Nayuki QR Code Generator](https://github.com/nayuki/QR-Code-generator).
|
|
6
|
+
Оригинальный код был форкнут и доработан, лежит в папке `lib`
|
|
7
|
+
|
|
8
|
+
Поддерживает произвольные данные, цвета, скругление глазков, добавление логотипа
|
|
9
|
+
|
|
10
|
+
QR-код генерируется и отрисовывается в HTML-элементе `<canvas>`
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## Структура
|
|
15
|
+
|
|
16
|
+
```markdown
|
|
17
|
+
qr-code/
|
|
18
|
+
├── lib/
|
|
19
|
+
│ ├── ecc.ts # Класс для уровней коррекции ошибок (ECC).
|
|
20
|
+
│ ├── index.ts # Основная логика генерации QR-кода (класс QrCode).
|
|
21
|
+
│ ├── mode.ts # Класс для режимов кодирования данных (числовой, байтовый и т.д.).
|
|
22
|
+
│ ├── qr-segment.ts # Класс для представления сегментов данных.
|
|
23
|
+
│ ├── types.ts # Базовые типы для внутренней библиотеки (bit, byte).
|
|
24
|
+
│ └── utils.ts # Вспомогательные функции для библиотеки.
|
|
25
|
+
├── service/
|
|
26
|
+
│ ├── common-utils.ts # Утилиты для вычислений (размеры лого, видимость модулей).
|
|
27
|
+
│ ├── draw-utils.ts # Утилиты для рисования на canvas (модули, логотип, "глаза").
|
|
28
|
+
│ ├── index.ts # Сервисный слой (QRService), управляющий подготовкой и отрисовкой.
|
|
29
|
+
│ └── utils.ts # Реэкспорт всех утилит из папки service.
|
|
30
|
+
├── ui/
|
|
31
|
+
│ └── molecules/
|
|
32
|
+
│ └── qr-code/
|
|
33
|
+
│ ├── index.tsx # React-компонент <QRCode>, использующий canvas.
|
|
34
|
+
│ └── styled.ts # Стили для canvas с помощью styled-components.
|
|
35
|
+
├── index.js.flow # Определения типов Flow для компонента.
|
|
36
|
+
├── index.ts # Главный файл, экспортирующий компонент <QRCode> и типы.
|
|
37
|
+
├── README.md # Документация по использованию компонента.
|
|
38
|
+
└── types.ts # Определения типов TypeScript для пропсов и структур данных.
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Возможности
|
|
42
|
+
|
|
43
|
+
- Генерация QR-кода по любой строке
|
|
44
|
+
- Кастомизация: размер, цвет точек, фоновый цвет, скругление глазков
|
|
45
|
+
- Логотип по центру QR-кода (base64 или URL)
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Компонент QRCode принимает параметры:
|
|
50
|
+
|
|
51
|
+
| Свойство | Тип | Обязательный | Описание | Значение по умолчанию |
|
|
52
|
+
|-------------------|------------------|--------------|----------------------------------------------------------|-----------------------|
|
|
53
|
+
| `text` | `string` | **Да** | Данные для кодирования в QR | — |
|
|
54
|
+
| `dotColor` | `string` | Нет | Цвет точек (основных модулей) QR-кода | `"#000"` |
|
|
55
|
+
| `bgColor` | `string` | Нет | Цвет фона QR-кода | `"transparent"` |
|
|
56
|
+
| `radius` | `number` | Нет | Радиус скругления точек QR (0–100, в процентах) | `0` |
|
|
57
|
+
| `finderRadius` | `number` | Нет | Радиус скругления углов глазков (0–100, в процентах) | `0` |
|
|
58
|
+
| `logo` | `string \| null` | Нет | URL или base64-строка логотипа по центру QR-кода | `null` |
|
|
59
|
+
| `logoSizePercent` | `number` | Нет | Размер логотипа (в процентах от QR-кода, обычно 10–40) | `30` |
|
|
60
|
+
| `smoothDots` | `boolean` | Нет | Сглаживание точек при скруглении (слияние смежных точек) | `false` |
|
|
61
|
+
| `size` | `number` | Нет | Размер QR-кода (px) | `200` |
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## Пример использования
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { QRCode } from '@foxford/qr-code'
|
|
69
|
+
|
|
70
|
+
type ComponentProps = {
|
|
71
|
+
qrString: string
|
|
72
|
+
qrLogo: string
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export const Component: React.FC<ComponentProps> = ({ qrString, qrLogo }) => {
|
|
76
|
+
return <QRCode text={qrString} size={200} finderRadius={10} radius={50} logo={qrLogo} smoothDots />
|
|
77
|
+
}
|
|
78
|
+
```
|