@qrcodesdk/react 0.0.1 → 0.0.2
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/CHANGELOG.md +11 -0
- package/README.md +118 -155
- package/dist/index.d.mts +18 -12
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +33 -28
- package/dist/index.mjs.map +1 -1
- package/package.json +21 -19
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @qrcodesdk/react
|
|
2
2
|
|
|
3
|
+
## 0.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 210c615: Replace the renderer and styling APIs with the new `matrix`, `style`, `accessibility`, and `image` option groups. Rename visual styling types, renderer image options, and CLI flags to match the new vocabulary. Add `@qrcodesdk/core/payload` for payload helpers, expose them from the core entry point, and improve rendering performance across SVG, canvas, and PNG output.
|
|
8
|
+
- 358292a: Tighten package export surfaces by marking cross-package implementation types as internal, using explicit Angular component exports, and emitting React's shared interfaces as type-only exports. React components now also use the platform's native child replacement API.
|
|
9
|
+
- 358292a: Refresh generated package READMEs with clearer setup, renderer, customization, download, and runtime guidance. Expand the Angular peer range to support Angular 20 through 22.
|
|
10
|
+
- Updated dependencies [358292a]
|
|
11
|
+
- @qrcodesdk/browser@0.0.2
|
|
12
|
+
- @qrcodesdk/core@0.0.2
|
|
13
|
+
|
|
3
14
|
## 0.0.1
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
<!-- Generated from apps/docs/src/content/docs/packages/react.mdx. Run `pnpm
|
|
1
|
+
<!-- Generated from apps/docs/src/content/docs/packages/react.mdx. Run `pnpm turbo run generate-readmes --filter=docs` to update. -->
|
|
2
2
|
|
|
3
|
-
<
|
|
3
|
+
<div align="center"><img src="https://qrcodesdk.dev/favicon.svg" alt="QRCodeSDK logo" width="240"></div>
|
|
4
4
|
|
|
5
5
|
# @qrcodesdk/react
|
|
6
6
|
|
|
7
|
-
[](https://npmx.dev/@qrcodesdk/react)    [](https://github.com/Dafnik/qrcodesdk/tree/main/packages/react)
|
|
8
8
|
|
|
9
|
-
**[Live Demo](https://qrcodesdk.dev/playground/?package=react)**
|
|
9
|
+
**[Documentation](https://qrcodesdk.dev) | [Live Demo](https://qrcodesdk.dev/playground/?package=react)**
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
It supports React and React DOM 18 and 19.
|
|
11
|
+
React components for rendering QR codes as inline SVG, PNG-backed Image elements, and Canvas elements.
|
|
14
12
|
|
|
15
13
|
## Install
|
|
16
14
|
|
|
17
15
|
```sh
|
|
18
|
-
npm install @qrcodesdk/react
|
|
16
|
+
npm install @qrcodesdk/react
|
|
19
17
|
```
|
|
20
18
|
|
|
21
19
|
```sh
|
|
22
|
-
pnpm add @qrcodesdk/react
|
|
20
|
+
pnpm add @qrcodesdk/react
|
|
23
21
|
```
|
|
24
22
|
|
|
25
23
|
<details>
|
|
@@ -28,25 +26,25 @@ pnpm add @qrcodesdk/react @qrcodesdk/core @qrcodesdk/browser
|
|
|
28
26
|
**vp**
|
|
29
27
|
|
|
30
28
|
```sh
|
|
31
|
-
vp add @qrcodesdk/react
|
|
29
|
+
vp add @qrcodesdk/react
|
|
32
30
|
```
|
|
33
31
|
|
|
34
32
|
**deno**
|
|
35
33
|
|
|
36
34
|
```sh
|
|
37
|
-
deno add @qrcodesdk/react
|
|
35
|
+
deno add @qrcodesdk/react
|
|
38
36
|
```
|
|
39
37
|
|
|
40
38
|
**bun**
|
|
41
39
|
|
|
42
40
|
```sh
|
|
43
|
-
bun add @qrcodesdk/react
|
|
41
|
+
bun add @qrcodesdk/react
|
|
44
42
|
```
|
|
45
43
|
|
|
46
44
|
**yarn**
|
|
47
45
|
|
|
48
46
|
```sh
|
|
49
|
-
yarn add @qrcodesdk/react
|
|
47
|
+
yarn add @qrcodesdk/react
|
|
50
48
|
```
|
|
51
49
|
|
|
52
50
|
</details>
|
|
@@ -61,68 +59,61 @@ import {QRCodeCanvas, QRCodeImage, QRCodeSVG} from '@qrcodesdk/react';
|
|
|
61
59
|
export function App() {
|
|
62
60
|
return (
|
|
63
61
|
<>
|
|
64
|
-
<QRCodeSVG
|
|
65
|
-
<QRCodeImage
|
|
66
|
-
<QRCodeCanvas
|
|
62
|
+
<QRCodeSVG payload="https://qrcodesdk.dev" />
|
|
63
|
+
<QRCodeImage payload="https://qrcodesdk.dev" />
|
|
64
|
+
<QRCodeCanvas payload="https://qrcodesdk.dev" />
|
|
67
65
|
</>
|
|
68
66
|
);
|
|
69
67
|
}
|
|
70
68
|
```
|
|
71
69
|
|
|
72
|
-
##
|
|
73
|
-
|
|
74
|
-
| Component | Output | Download support |
|
|
75
|
-
| -------------- | ------------------------------------------- | ---------------- |
|
|
76
|
-
| `QRCodeSVG` | Inline SVG inside a wrapper `<div>` | SVG |
|
|
77
|
-
| `QRCodeImage` | PNG-backed `<img>` inside a wrapper `<div>` | PNG |
|
|
78
|
-
| `QRCodeCanvas` | `<canvas>` inside a wrapper `<div>` | None |
|
|
79
|
-
|
|
80
|
-
All components accept:
|
|
81
|
-
|
|
82
|
-
| Prop | Type | Description |
|
|
83
|
-
| ----------- | -------------------------- | ----------------------------------------------- |
|
|
84
|
-
| `data` | `string \| number` | Required QR code payload. |
|
|
85
|
-
| `options` | Component-specific options | Optional matrix and renderer configuration. |
|
|
86
|
-
| `className` | `string` | CSS class applied to the component wrapper div. |
|
|
87
|
-
|
|
88
|
-
`options` supports shared matrix options such as `version`, `mode`, `errorCorrectionLevel`, and `mask`. Renderer options match the corresponding QRCodeSDK renderer:
|
|
70
|
+
## Version compatibility
|
|
89
71
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
72
|
+
| @qrcodesdk/react | React |
|
|
73
|
+
| ---------------- | ------------------- |
|
|
74
|
+
| `0.x.x` | `^18.0.0` `^19.0.0` |
|
|
93
75
|
|
|
94
|
-
|
|
76
|
+
## Components
|
|
95
77
|
|
|
96
|
-
|
|
78
|
+
| Component | Output | Download support |
|
|
79
|
+
| -------------- | -------------------- | ---------------- |
|
|
80
|
+
| `QRCodeSVG` | `Inline SVG element` | SVG |
|
|
81
|
+
| `QRCodeImage` | `PNG-backed <img>` | PNG |
|
|
82
|
+
| `QRCodeCanvas` | `<canvas> element` | None |
|
|
97
83
|
|
|
98
|
-
|
|
84
|
+
### Options
|
|
99
85
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `mask` | `0` through `7` | Automatic | Pins the QR mask. |
|
|
86
|
+
| Prop | Type | Description |
|
|
87
|
+
| ----------- | ---------------------------- | ----------------------------------------------- |
|
|
88
|
+
| `data` | `string \| number` | Required QR code payload. |
|
|
89
|
+
| `options` | `Component-specific options` | Optional matrix and renderer configuration. |
|
|
90
|
+
| `className` | `string` | CSS class applied to the component wrapper div. |
|
|
106
91
|
|
|
107
|
-
|
|
92
|
+
React passes `className`, `style`, and other fallthrough attributes to the component's wrapper `<div>`.
|
|
93
|
+
Use a React ref when you need a download handle; the rendered SVG, Image, or Canvas remains inside that wrapper.
|
|
108
94
|
|
|
109
95
|
## Live examples
|
|
110
96
|
|
|
111
97
|
### SVG component
|
|
112
98
|
|
|
113
99
|
```tsx
|
|
100
|
+
import type {QRCodeSVGOptions} from '@qrcodesdk/core';
|
|
101
|
+
import {useMemo} from 'react';
|
|
102
|
+
|
|
114
103
|
import {QRCodeSVG} from '@qrcodesdk/react';
|
|
115
104
|
|
|
116
105
|
export default function QRCodeSVGExample() {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
options={{
|
|
106
|
+
const options = useMemo<QRCodeSVGOptions>(
|
|
107
|
+
() => ({
|
|
108
|
+
accessibility: {
|
|
121
109
|
title: 'QR code for qrcodesdk.dev',
|
|
122
110
|
ariaLabel: 'Scan to open qrcodesdk.dev',
|
|
123
|
-
}
|
|
124
|
-
|
|
111
|
+
},
|
|
112
|
+
}),
|
|
113
|
+
[],
|
|
125
114
|
);
|
|
115
|
+
|
|
116
|
+
return <QRCodeSVG payload="https://qrcodesdk.dev" options={options} />;
|
|
126
117
|
}
|
|
127
118
|
```
|
|
128
119
|
|
|
@@ -130,17 +121,23 @@ export default function QRCodeSVGExample() {
|
|
|
130
121
|
|
|
131
122
|
```tsx
|
|
132
123
|
import type {QRCodeImageOptions} from '@qrcodesdk/browser';
|
|
124
|
+
import {useMemo} from 'react';
|
|
125
|
+
|
|
133
126
|
import {QRCodeImage} from '@qrcodesdk/react';
|
|
134
127
|
|
|
135
128
|
export default function QRCodeImageExample() {
|
|
136
|
-
const options
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
129
|
+
const options = useMemo<QRCodeImageOptions>(
|
|
130
|
+
() => ({
|
|
131
|
+
style: {moduleSize: 8, quietZone: 4},
|
|
132
|
+
accessibility: {
|
|
133
|
+
alt: 'QR code for qrcodesdk.dev',
|
|
134
|
+
ariaLabel: 'Scan to open qrcodesdk.dev',
|
|
135
|
+
},
|
|
136
|
+
}),
|
|
137
|
+
[],
|
|
138
|
+
);
|
|
139
|
+
|
|
140
|
+
return <QRCodeImage payload="https://qrcodesdk.dev" options={options} />;
|
|
144
141
|
}
|
|
145
142
|
```
|
|
146
143
|
|
|
@@ -148,41 +145,45 @@ export default function QRCodeImageExample() {
|
|
|
148
145
|
|
|
149
146
|
```tsx
|
|
150
147
|
import type {QRCodeCanvasOptions} from '@qrcodesdk/browser';
|
|
148
|
+
import {useMemo} from 'react';
|
|
149
|
+
|
|
151
150
|
import {QRCodeCanvas} from '@qrcodesdk/react';
|
|
152
151
|
|
|
153
152
|
export default function QRCodeCanvasExample() {
|
|
154
|
-
const options
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
153
|
+
const options = useMemo<QRCodeCanvasOptions>(
|
|
154
|
+
() => ({
|
|
155
|
+
style: {
|
|
156
|
+
moduleSize: 8,
|
|
157
|
+
quietZone: 4,
|
|
158
|
+
foreground: '#111827',
|
|
159
|
+
background: '#ffffff',
|
|
160
|
+
},
|
|
161
|
+
}),
|
|
162
|
+
[],
|
|
163
|
+
);
|
|
164
|
+
|
|
165
|
+
return <QRCodeCanvas payload="https://qrcodesdk.dev" options={options} />;
|
|
164
166
|
}
|
|
165
167
|
```
|
|
166
168
|
|
|
167
169
|
### PNG download
|
|
168
170
|
|
|
169
171
|
```tsx
|
|
170
|
-
import {
|
|
172
|
+
import type {QRCodeImageOptions} from '@qrcodesdk/browser';
|
|
173
|
+
import {useMemo, useRef} from 'react';
|
|
171
174
|
|
|
172
175
|
import {QRCodeImage, type QRCodeDownloadHandle} from '@qrcodesdk/react';
|
|
173
176
|
|
|
174
177
|
export default function QRCodeDownloadImageExample() {
|
|
175
178
|
const qrcode = useRef<QRCodeDownloadHandle>(null);
|
|
179
|
+
const options = useMemo<QRCodeImageOptions>(
|
|
180
|
+
() => ({accessibility: {alt: 'QR code for qrcodesdk.dev'}}),
|
|
181
|
+
[],
|
|
182
|
+
);
|
|
176
183
|
|
|
177
184
|
return (
|
|
178
|
-
<div className="flex flex-col items-center">
|
|
179
|
-
<QRCodeImage
|
|
180
|
-
data="https://qrcodesdk.dev"
|
|
181
|
-
options={{
|
|
182
|
-
alt: 'QR code for qrcodesdk.dev',
|
|
183
|
-
}}
|
|
184
|
-
ref={qrcode}
|
|
185
|
-
/>
|
|
185
|
+
<div className="flex flex-col items-center gap-2">
|
|
186
|
+
<QRCodeImage payload="https://qrcodesdk.dev" options={options} ref={qrcode} />
|
|
186
187
|
<button
|
|
187
188
|
className="btn-primary"
|
|
188
189
|
onClick={() => qrcode.current?.download('qrcodesdk')}
|
|
@@ -194,78 +195,13 @@ export default function QRCodeDownloadImageExample() {
|
|
|
194
195
|
}
|
|
195
196
|
```
|
|
196
197
|
|
|
197
|
-
##
|
|
198
|
-
|
|
199
|
-
| Option | Components | Type | Default |
|
|
200
|
-
| ----------------------- | ---------- | ---------------------------- | -----------------: |
|
|
201
|
-
| `size` | All | `number` | `5` |
|
|
202
|
-
| `margin` | All | `number` | `4` |
|
|
203
|
-
| `colors.colorDark` | All | `string` | `'#000000'` |
|
|
204
|
-
| `colors.colorLight` | All | `string` | `'#ffffff'` |
|
|
205
|
-
| `dotsOptions` | All | `QRCodeDotsOptions` | `{type: 'square'}` |
|
|
206
|
-
| `cornersSquareOptions` | All | `QRCodeCornersSquareOptions` | `{type: 'square'}` |
|
|
207
|
-
| `cornersDotOptions` | All | `QRCodeCornersDotOptions` | `{type: 'square'}` |
|
|
208
|
-
| `alt` | SVG, Image | `string` | `undefined` |
|
|
209
|
-
| `ariaLabel` | SVG, Image | `string` | `undefined` |
|
|
210
|
-
| `title` | SVG, Image | `string` | `undefined` |
|
|
211
|
-
| `image.source` | All | Renderer-specific source | `undefined` |
|
|
212
|
-
| `image.size` | All | `number` | `0.4` |
|
|
213
|
-
| `image.padding` | All | `number` | `1` |
|
|
214
|
-
| `image.clearBackground` | All | `boolean` | `true` |
|
|
198
|
+
## Center images
|
|
215
199
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
### Prepared center images
|
|
222
|
-
|
|
223
|
-
Prepare browser image sources before rendering:
|
|
224
|
-
|
|
225
|
-
```tsx
|
|
226
|
-
import {useState} from 'react';
|
|
227
|
-
|
|
228
|
-
import {QRCodeImage} from '@qrcodesdk/react';
|
|
229
|
-
|
|
230
|
-
export function QRCodeWithLogo() {
|
|
231
|
-
const [logo, setLogo] = useState<HTMLImageElement>();
|
|
232
|
-
|
|
233
|
-
async function selectLogo(file: File) {
|
|
234
|
-
const source = new Image();
|
|
235
|
-
const localUrl = URL.createObjectURL(file);
|
|
236
|
-
source.src = localUrl;
|
|
237
|
-
|
|
238
|
-
try {
|
|
239
|
-
await source.decode();
|
|
240
|
-
setLogo(source);
|
|
241
|
-
} finally {
|
|
242
|
-
URL.revokeObjectURL(localUrl);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
return (
|
|
247
|
-
<>
|
|
248
|
-
<input
|
|
249
|
-
accept="image/*"
|
|
250
|
-
type="file"
|
|
251
|
-
onChange={(event) => {
|
|
252
|
-
const file = event.currentTarget.files?.[0];
|
|
253
|
-
if (file) void selectLogo(file);
|
|
254
|
-
}}
|
|
255
|
-
/>
|
|
256
|
-
{logo ? (
|
|
257
|
-
<QRCodeImage
|
|
258
|
-
data="https://qrcodesdk.dev"
|
|
259
|
-
options={{errorCorrectionLevel: 'H', image: {source: logo, size: 0.3}}}
|
|
260
|
-
/>
|
|
261
|
-
) : null}
|
|
262
|
-
</>
|
|
263
|
-
);
|
|
264
|
-
}
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
Use an embedded `data:image/...` URL for `QRCodeSVG`. Components never load paths or URLs
|
|
268
|
-
themselves, and SVG/PNG downloads include the overlay.
|
|
200
|
+
Load and decode a browser image first, store the resulting `HTMLImageElement` in state, and pass
|
|
201
|
+
it through `options.centerImage.source`. Updating that state rerenders the component with the prepared
|
|
202
|
+
source. See
|
|
203
|
+
[Add a center image](https://qrcodesdk.dev/guides/center-images/#react) for the complete
|
|
204
|
+
React lifecycle.
|
|
269
205
|
|
|
270
206
|
## Download files
|
|
271
207
|
|
|
@@ -285,7 +221,7 @@ export function QRCodeDownload() {
|
|
|
285
221
|
<button type="button" onClick={() => qrcode.current?.download('qrcodesdk')}>
|
|
286
222
|
Download PNG
|
|
287
223
|
</button>
|
|
288
|
-
<QRCodeImage ref={qrcode}
|
|
224
|
+
<QRCodeImage ref={qrcode} payload="https://qrcodesdk.dev" />
|
|
289
225
|
</>
|
|
290
226
|
);
|
|
291
227
|
}
|
|
@@ -295,16 +231,43 @@ The appropriate `.svg` or `.png` extension is appended when necessary.
|
|
|
295
231
|
|
|
296
232
|
`QRCodeCanvas` does not include a download method. Use `QRCodeImage` when you want built-in PNG download support.
|
|
297
233
|
|
|
234
|
+
See [Download or save](https://qrcodesdk.dev/guides/download-or-save/#download-from-react) for SVG, PNG, and manual
|
|
235
|
+
Canvas downloads.
|
|
236
|
+
|
|
298
237
|
## Server-side rendering
|
|
299
238
|
|
|
300
239
|
`QRCodeSVG` produces runtime-neutral SVG and can render on the server.
|
|
301
240
|
|
|
302
241
|
`QRCodeImage` and `QRCodeCanvas` rely on browser DOM and Canvas APIs, so they skip element creation and downloads outside the browser and populate their host after hydration.
|
|
303
242
|
|
|
243
|
+
## Shared options
|
|
244
|
+
|
|
245
|
+
The `options` prop combines matrix options with the selected renderer's options. Use the
|
|
246
|
+
[builder reference](https://qrcodesdk.dev/reference/builder/) for encoding, version, mask, and error correction;
|
|
247
|
+
[Customize output](https://qrcodesdk.dev/guides/customize/) for shared visual options; and the dedicated
|
|
248
|
+
[renderer references](https://qrcodesdk.dev/reference/renderers/) for output-specific options and constraints.
|
|
249
|
+
|
|
250
|
+
## Public API
|
|
251
|
+
|
|
252
|
+
```ts
|
|
253
|
+
import {
|
|
254
|
+
type QRCodeBaseProps,
|
|
255
|
+
QRCodeCanvas,
|
|
256
|
+
type QRCodeCanvasProps,
|
|
257
|
+
type QRCodeDownloadHandle,
|
|
258
|
+
QRCodeImage,
|
|
259
|
+
type QRCodeImageProps,
|
|
260
|
+
QRCodeSVG,
|
|
261
|
+
type QRCodeSVGProps,
|
|
262
|
+
} from '@qrcodesdk/react';
|
|
263
|
+
```
|
|
264
|
+
|
|
304
265
|
## Documentation
|
|
305
266
|
|
|
306
267
|
- [@qrcodesdk/react](https://qrcodesdk.dev/packages/react/)
|
|
307
|
-
- [Customize
|
|
308
|
-
- [
|
|
309
|
-
- [
|
|
310
|
-
- [
|
|
268
|
+
- [Customize appearance](https://qrcodesdk.dev/guides/customize/)
|
|
269
|
+
- [Add a center image](https://qrcodesdk.dev/guides/center-images/)
|
|
270
|
+
- [Download or save a QR code as SVG or PNG](https://qrcodesdk.dev/guides/download-or-save/)
|
|
271
|
+
- [SVG string renderer](https://qrcodesdk.dev/reference/renderers/svg/)
|
|
272
|
+
- [PNG-backed Image element renderer](https://qrcodesdk.dev/reference/renderers/image/)
|
|
273
|
+
- [Canvas element renderer](https://qrcodesdk.dev/reference/renderers/canvas/)
|
package/dist/index.d.mts
CHANGED
|
@@ -1,26 +1,32 @@
|
|
|
1
|
-
import { QRCodeCanvasOptions, QRCodeImageOptions } from "@qrcodesdk/browser";
|
|
2
|
-
import {
|
|
1
|
+
import { QRCodeCanvasOptions, QRCodeCanvasOptions as QRCodeCanvasOptions$1, QRCodeImageOptions, QRCodeImageOptions as QRCodeImageOptions$1 } from "@qrcodesdk/browser";
|
|
2
|
+
import { QRCodePayload, QRCodeSVGOptions, QRCodeSVGOptions as QRCodeSVGOptions$1 } from "@qrcodesdk/core";
|
|
3
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
3
4
|
//#region src/types.d.ts
|
|
4
|
-
type QRCodeBaseProps<TOptions> = {
|
|
5
|
-
|
|
5
|
+
type QRCodeBaseProps<TOptions> = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
|
|
6
|
+
payload: QRCodePayload;
|
|
6
7
|
options?: TOptions;
|
|
7
|
-
className?: string;
|
|
8
8
|
};
|
|
9
9
|
type QRCodeDownloadHandle = {
|
|
10
10
|
download(filename?: string): void;
|
|
11
11
|
};
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/QRCodeCanvas.d.ts
|
|
14
|
-
type QRCodeCanvasProps = QRCodeBaseProps<QRCodeCanvasOptions>;
|
|
15
|
-
declare function QRCodeCanvas({
|
|
14
|
+
type QRCodeCanvasProps = QRCodeBaseProps<QRCodeCanvasOptions$1>;
|
|
15
|
+
declare function QRCodeCanvas({ payload, options, ...wrapperProps }: QRCodeCanvasProps): import("react").JSX.Element;
|
|
16
16
|
//#endregion
|
|
17
17
|
//#region src/QRCodeImage.d.ts
|
|
18
|
-
type QRCodeImageProps = QRCodeBaseProps<QRCodeImageOptions>;
|
|
19
|
-
declare const QRCodeImage: import("react").ForwardRefExoticComponent<
|
|
18
|
+
type QRCodeImageProps = QRCodeBaseProps<QRCodeImageOptions$1>;
|
|
19
|
+
declare const QRCodeImage: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
|
|
20
|
+
payload: import("@qrcodesdk/core").QRCodePayload;
|
|
21
|
+
options?: QRCodeImageOptions$1 | undefined;
|
|
22
|
+
} & import("react").RefAttributes<QRCodeDownloadHandle>>;
|
|
20
23
|
//#endregion
|
|
21
24
|
//#region src/QRCodeSVG.d.ts
|
|
22
|
-
type QRCodeSVGProps = QRCodeBaseProps<QRCodeSVGOptions>;
|
|
23
|
-
declare const QRCodeSVG: import("react").ForwardRefExoticComponent<
|
|
25
|
+
type QRCodeSVGProps = QRCodeBaseProps<QRCodeSVGOptions$1>;
|
|
26
|
+
declare const QRCodeSVG: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
|
|
27
|
+
payload: import("@qrcodesdk/core").QRCodePayload;
|
|
28
|
+
options?: QRCodeSVGOptions$1 | undefined;
|
|
29
|
+
} & import("react").RefAttributes<QRCodeDownloadHandle>>;
|
|
24
30
|
//#endregion
|
|
25
|
-
export { type QRCodeBaseProps, QRCodeCanvas, type QRCodeCanvasProps, type QRCodeDownloadHandle, QRCodeImage, type QRCodeImageProps, QRCodeSVG, type QRCodeSVGProps };
|
|
31
|
+
export { type QRCodeBaseProps, QRCodeCanvas, type QRCodeCanvasOptions, type QRCodeCanvasProps, type QRCodeDownloadHandle, QRCodeImage, type QRCodeImageOptions, type QRCodeImageProps, QRCodeSVG, type QRCodeSVGOptions, type QRCodeSVGProps };
|
|
26
32
|
//# sourceMappingURL=index.d.mts.map
|
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/QRCodeCanvas.tsx","../src/QRCodeImage.tsx","../src/QRCodeSVG.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/QRCodeCanvas.tsx","../src/QRCodeImage.tsx","../src/QRCodeSVG.tsx"],"mappings":";;;;KAIY,gBAAgB,YAAY,KAAK;EAC3C,SAAS;EACT,UAAU;;KAGA;EACV,SAAS;;;;KCHC,oBAAoB,gBAAgB;iBAEhC,eAAc,SAAS,YAAY,gBAAe,oCAAiB,IAAA;;;KCEvE,mBAAmB,gBAAgB;cAElC,6BAAW,0BAAA,KAAA,qBAAA,kCAAA,eAAA,iBAAA;;;oBAiCtB,cAAA;;;KCvCU,iBAAiB,gBAAgB;cAEhC,2BAAS,0BAAA,KAAA,qBAAA,kCAAA,eAAA,iBAAA;;;oBA6BpB,cAAA"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,80 +1,85 @@
|
|
|
1
1
|
import { QRCodeCanvasRenderer, QRCodeDownloadImageRenderer, QRCodeDownloadSVGRenderer, QRCodeImageRenderer } from "@qrcodesdk/browser";
|
|
2
|
-
import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
|
|
3
2
|
import { QRCodeSVGRenderer, qrcode } from "@qrcodesdk/core";
|
|
3
|
+
import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
//#region src/
|
|
6
|
-
function
|
|
7
|
-
|
|
5
|
+
//#region src/split-options.ts
|
|
6
|
+
function splitOptions(options) {
|
|
7
|
+
if (!options) return [void 0, void 0];
|
|
8
|
+
const { matrix, ...renderer } = options;
|
|
9
|
+
return [matrix, renderer];
|
|
8
10
|
}
|
|
9
11
|
//#endregion
|
|
10
12
|
//#region src/QRCodeCanvas.tsx
|
|
11
|
-
function QRCodeCanvas({
|
|
13
|
+
function QRCodeCanvas({ payload, options, ...wrapperProps }) {
|
|
12
14
|
const containerRef = useRef(null);
|
|
13
|
-
const
|
|
15
|
+
const [matrixOptions, rendererOptions] = useMemo(() => splitOptions(options), [options]);
|
|
16
|
+
const canvasRenderer = useMemo(() => QRCodeCanvasRenderer(rendererOptions), [rendererOptions]);
|
|
14
17
|
useEffect(() => {
|
|
15
18
|
const container = containerRef.current;
|
|
16
19
|
if (!container) return;
|
|
17
|
-
|
|
20
|
+
container.replaceChildren(qrcode(payload).options(matrixOptions).render(canvasRenderer));
|
|
18
21
|
}, [
|
|
19
22
|
canvasRenderer,
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
payload,
|
|
24
|
+
matrixOptions
|
|
22
25
|
]);
|
|
23
26
|
return /* @__PURE__ */ jsx("div", {
|
|
24
|
-
|
|
27
|
+
...wrapperProps,
|
|
25
28
|
ref: containerRef
|
|
26
29
|
});
|
|
27
30
|
}
|
|
28
31
|
//#endregion
|
|
29
32
|
//#region src/QRCodeImage.tsx
|
|
30
|
-
const QRCodeImage = forwardRef(function QRCodeImage({
|
|
33
|
+
const QRCodeImage = forwardRef(function QRCodeImage({ payload, options, ...wrapperProps }, ref) {
|
|
31
34
|
const containerRef = useRef(null);
|
|
32
|
-
const
|
|
35
|
+
const [matrixOptions, rendererOptions] = useMemo(() => splitOptions(options), [options]);
|
|
36
|
+
const imageRenderer = useMemo(() => QRCodeImageRenderer(rendererOptions), [rendererOptions]);
|
|
33
37
|
useEffect(() => {
|
|
34
38
|
const container = containerRef.current;
|
|
35
39
|
if (!container) return;
|
|
36
|
-
|
|
40
|
+
container.replaceChildren(qrcode(payload).options(matrixOptions).render(imageRenderer));
|
|
37
41
|
}, [
|
|
38
|
-
|
|
42
|
+
payload,
|
|
39
43
|
imageRenderer,
|
|
40
|
-
|
|
44
|
+
matrixOptions
|
|
41
45
|
]);
|
|
42
46
|
useImperativeHandle(ref, () => ({ download(filename) {
|
|
43
|
-
qrcode(
|
|
47
|
+
qrcode(payload).options(matrixOptions).render(QRCodeDownloadImageRenderer({
|
|
44
48
|
renderer: imageRenderer,
|
|
45
49
|
filename
|
|
46
50
|
}));
|
|
47
51
|
} }), [
|
|
48
|
-
|
|
52
|
+
payload,
|
|
49
53
|
imageRenderer,
|
|
50
|
-
|
|
54
|
+
matrixOptions
|
|
51
55
|
]);
|
|
52
56
|
return /* @__PURE__ */ jsx("div", {
|
|
53
|
-
|
|
57
|
+
...wrapperProps,
|
|
54
58
|
ref: containerRef
|
|
55
59
|
});
|
|
56
60
|
});
|
|
57
61
|
//#endregion
|
|
58
62
|
//#region src/QRCodeSVG.tsx
|
|
59
|
-
const QRCodeSVG = forwardRef(function QRCodeSVG({
|
|
60
|
-
const
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
const QRCodeSVG = forwardRef(function QRCodeSVG({ payload, options, ...wrapperProps }, ref) {
|
|
64
|
+
const [matrixOptions, rendererOptions] = useMemo(() => splitOptions(options), [options]);
|
|
65
|
+
const svgRenderer = useMemo(() => QRCodeSVGRenderer(rendererOptions), [rendererOptions]);
|
|
66
|
+
const svg = useMemo(() => qrcode(payload).options(matrixOptions).render(svgRenderer), [
|
|
67
|
+
payload,
|
|
68
|
+
matrixOptions,
|
|
64
69
|
svgRenderer
|
|
65
70
|
]);
|
|
66
71
|
useImperativeHandle(ref, () => ({ download(filename) {
|
|
67
|
-
qrcode(
|
|
72
|
+
qrcode(payload).options(matrixOptions).render(QRCodeDownloadSVGRenderer({
|
|
68
73
|
renderer: svgRenderer,
|
|
69
74
|
filename
|
|
70
75
|
}));
|
|
71
76
|
} }), [
|
|
72
|
-
|
|
73
|
-
|
|
77
|
+
payload,
|
|
78
|
+
matrixOptions,
|
|
74
79
|
svgRenderer
|
|
75
80
|
]);
|
|
76
81
|
return /* @__PURE__ */ jsx("div", {
|
|
77
|
-
|
|
82
|
+
...wrapperProps,
|
|
78
83
|
dangerouslySetInnerHTML: { __html: svg }
|
|
79
84
|
});
|
|
80
85
|
});
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../src/
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/split-options.ts","../src/QRCodeCanvas.tsx","../src/QRCodeImage.tsx","../src/QRCodeSVG.tsx"],"sourcesContent":["import type {QRCodeMatrixOptions} from '@qrcodesdk/core';\n\nexport function splitOptions<T extends {readonly matrix?: QRCodeMatrixOptions}>(\n options: T | undefined,\n): readonly [QRCodeMatrixOptions | undefined, Omit<T, 'matrix'> | undefined] {\n if (!options) return [undefined, undefined];\n const {matrix, ...renderer} = options;\n return [matrix, renderer];\n}\n","import {type QRCodeCanvasOptions, QRCodeCanvasRenderer} from '@qrcodesdk/browser';\nimport {qrcode} from '@qrcodesdk/core';\nimport {useEffect, useMemo, useRef} from 'react';\n\nimport type {QRCodeBaseProps} from './types';\nimport {splitOptions} from './split-options';\n\nexport type QRCodeCanvasProps = QRCodeBaseProps<QRCodeCanvasOptions>;\n\nexport function QRCodeCanvas({payload, options, ...wrapperProps}: QRCodeCanvasProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const [matrixOptions, rendererOptions] = useMemo(() => splitOptions(options), [options]);\n const canvasRenderer = useMemo(() => QRCodeCanvasRenderer(rendererOptions), [rendererOptions]);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n container.replaceChildren(qrcode(payload).options(matrixOptions).render(canvasRenderer));\n }, [canvasRenderer, payload, matrixOptions]);\n\n return <div {...wrapperProps} ref={containerRef} />;\n}\n","import {\n QRCodeDownloadImageRenderer,\n type QRCodeImageOptions,\n QRCodeImageRenderer,\n} from '@qrcodesdk/browser';\nimport {qrcode} from '@qrcodesdk/core';\nimport {forwardRef, useEffect, useImperativeHandle, useMemo, useRef} from 'react';\n\nimport type {QRCodeBaseProps, QRCodeDownloadHandle} from './types';\nimport {splitOptions} from './split-options';\n\nexport type QRCodeImageProps = QRCodeBaseProps<QRCodeImageOptions>;\n\nexport const QRCodeImage = forwardRef<QRCodeDownloadHandle, QRCodeImageProps>(function QRCodeImage(\n {payload, options, ...wrapperProps},\n ref,\n) {\n const containerRef = useRef<HTMLDivElement>(null);\n const [matrixOptions, rendererOptions] = useMemo(() => splitOptions(options), [options]);\n const imageRenderer = useMemo(() => QRCodeImageRenderer(rendererOptions), [rendererOptions]);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n container.replaceChildren(qrcode(payload).options(matrixOptions).render(imageRenderer));\n }, [payload, imageRenderer, matrixOptions]);\n\n useImperativeHandle(\n ref,\n () => ({\n download(filename?: string) {\n qrcode(payload)\n .options(matrixOptions)\n .render(\n QRCodeDownloadImageRenderer({\n renderer: imageRenderer,\n filename,\n }),\n );\n },\n }),\n [payload, imageRenderer, matrixOptions],\n );\n\n return <div {...wrapperProps} ref={containerRef} />;\n});\n","import {QRCodeDownloadSVGRenderer} from '@qrcodesdk/browser';\nimport {type QRCodeSVGOptions, QRCodeSVGRenderer, qrcode} from '@qrcodesdk/core';\nimport {forwardRef, useImperativeHandle, useMemo} from 'react';\n\nimport type {QRCodeBaseProps, QRCodeDownloadHandle} from './types';\nimport {splitOptions} from './split-options';\n\nexport type QRCodeSVGProps = QRCodeBaseProps<QRCodeSVGOptions>;\n\nexport const QRCodeSVG = forwardRef<QRCodeDownloadHandle, QRCodeSVGProps>(function QRCodeSVG(\n {payload, options, ...wrapperProps},\n ref,\n) {\n const [matrixOptions, rendererOptions] = useMemo(() => splitOptions(options), [options]);\n const svgRenderer = useMemo(() => QRCodeSVGRenderer(rendererOptions), [rendererOptions]);\n const svg = useMemo(\n () => qrcode(payload).options(matrixOptions).render(svgRenderer),\n [payload, matrixOptions, svgRenderer],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n download(filename?: string) {\n qrcode(payload)\n .options(matrixOptions)\n .render(\n QRCodeDownloadSVGRenderer({\n renderer: svgRenderer,\n filename,\n }),\n );\n },\n }),\n [payload, matrixOptions, svgRenderer],\n );\n\n return <div {...wrapperProps} dangerouslySetInnerHTML={{__html: svg}} />;\n});\n"],"mappings":";;;;;AAEA,SAAgB,aACd,SAC2E;CAC3E,IAAI,CAAC,SAAS,OAAO,CAAC,KAAA,GAAW,KAAA,CAAS;CAC1C,MAAM,EAAC,QAAQ,GAAG,aAAY;CAC9B,OAAO,CAAC,QAAQ,QAAQ;AAC1B;;;ACCA,SAAgB,aAAa,EAAC,SAAS,SAAS,GAAG,gBAAkC;CACnF,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,eAAe,mBAAmB,cAAc,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;CACvF,MAAM,iBAAiB,cAAc,qBAAqB,eAAe,GAAG,CAAC,eAAe,CAAC;CAE7F,gBAAgB;EACd,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WAAW;EAEhB,UAAU,gBAAgB,OAAO,OAAO,CAAC,CAAC,QAAQ,aAAa,CAAC,CAAC,OAAO,cAAc,CAAC;CACzF,GAAG;EAAC;EAAgB;EAAS;CAAa,CAAC;CAE3C,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAc,KAAK;CAAe,CAAA;AACpD;;;ACTA,MAAa,cAAc,WAAmD,SAAS,YACrF,EAAC,SAAS,SAAS,GAAG,gBACtB,KACA;CACA,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,eAAe,mBAAmB,cAAc,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;CACvF,MAAM,gBAAgB,cAAc,oBAAoB,eAAe,GAAG,CAAC,eAAe,CAAC;CAE3F,gBAAgB;EACd,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WAAW;EAEhB,UAAU,gBAAgB,OAAO,OAAO,CAAC,CAAC,QAAQ,aAAa,CAAC,CAAC,OAAO,aAAa,CAAC;CACxF,GAAG;EAAC;EAAS;EAAe;CAAa,CAAC;CAE1C,oBACE,YACO,EACL,SAAS,UAAmB;EAC1B,OAAO,OAAO,CAAC,CACZ,QAAQ,aAAa,CAAC,CACtB,OACC,4BAA4B;GAC1B,UAAU;GACV;EACF,CAAC,CACH;CACJ,EACF,IACA;EAAC;EAAS;EAAe;CAAa,CACxC;CAEA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAc,KAAK;CAAe,CAAA;AACpD,CAAC;;;ACrCD,MAAa,YAAY,WAAiD,SAAS,UACjF,EAAC,SAAS,SAAS,GAAG,gBACtB,KACA;CACA,MAAM,CAAC,eAAe,mBAAmB,cAAc,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;CACvF,MAAM,cAAc,cAAc,kBAAkB,eAAe,GAAG,CAAC,eAAe,CAAC;CACvF,MAAM,MAAM,cACJ,OAAO,OAAO,CAAC,CAAC,QAAQ,aAAa,CAAC,CAAC,OAAO,WAAW,GAC/D;EAAC;EAAS;EAAe;CAAW,CACtC;CAEA,oBACE,YACO,EACL,SAAS,UAAmB;EAC1B,OAAO,OAAO,CAAC,CACZ,QAAQ,aAAa,CAAC,CACtB,OACC,0BAA0B;GACxB,UAAU;GACV;EACF,CAAC,CACH;CACJ,EACF,IACA;EAAC;EAAS;EAAe;CAAW,CACtC;CAEA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAc,yBAAyB,EAAC,QAAQ,IAAG;CAAI,CAAA;AACzE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qrcodesdk/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.2",
|
|
5
5
|
"description": "@qrcodesdk/react provides React components for rendering QR codes as SVG, PNG-backed image elements, and canvas elements.",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"private": false,
|
|
@@ -60,35 +60,37 @@
|
|
|
60
60
|
],
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"react": "^18.0.0 || ^19.0.0",
|
|
63
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
64
|
+
},
|
|
65
|
+
"dependencies": {
|
|
66
|
+
"@qrcodesdk/browser": "0.0.2",
|
|
67
|
+
"@qrcodesdk/core": "0.0.2"
|
|
66
68
|
},
|
|
67
69
|
"devDependencies": {
|
|
70
|
+
"@qrcodesdk/browser": "0.0.2",
|
|
71
|
+
"@qrcodesdk/core": "0.0.2",
|
|
72
|
+
"@repo/core-testing": "0.0.0",
|
|
73
|
+
"@repo/eslint-config": "0.0.0",
|
|
74
|
+
"@repo/typescript-config": "0.0.0",
|
|
68
75
|
"@testing-library/dom": "10.4.1",
|
|
69
|
-
"@testing-library/react": "16.3.
|
|
70
|
-
"@types/react": "19.2.
|
|
71
|
-
"@types/react-dom": "19.2.
|
|
76
|
+
"@testing-library/react": "16.3.3",
|
|
77
|
+
"@types/react": "19.2.18",
|
|
78
|
+
"@types/react-dom": "19.2.5",
|
|
72
79
|
"jsdom": "29.1.1",
|
|
73
|
-
"react": "19.2.
|
|
74
|
-
"react-dom": "19.2.
|
|
75
|
-
"tsdown": "0.22.
|
|
80
|
+
"react": "19.2.8",
|
|
81
|
+
"react-dom": "19.2.8",
|
|
82
|
+
"tsdown": "0.22.14",
|
|
76
83
|
"typescript": "7.0.2",
|
|
77
|
-
"vitest": "4.1.
|
|
78
|
-
"@qrcodesdk/browser": "0.0.1",
|
|
79
|
-
"@qrcodesdk/core": "0.0.1",
|
|
80
|
-
"@repo/eslint-config": "0.0.0",
|
|
81
|
-
"@repo/typescript-config": "0.0.0",
|
|
82
|
-
"@repo/core-testing": "0.0.0"
|
|
84
|
+
"vitest": "4.1.11"
|
|
83
85
|
},
|
|
84
86
|
"scripts": {
|
|
85
87
|
"build": "tsdown",
|
|
86
88
|
"postbuild": "cp ../../LICENSE .",
|
|
87
89
|
"watch": "tsdown --watch",
|
|
88
|
-
"test": "vitest --watch false",
|
|
90
|
+
"test": "vitest --watch false && node ../core-testing/scripts/verify-package-artifact.mjs",
|
|
89
91
|
"test:coverage:raw": "vitest --coverage --watch false",
|
|
90
|
-
"check-types": "tsc --noEmit",
|
|
91
|
-
"lint": "eslint src tests --max-warnings 0",
|
|
92
|
+
"check-types": "tsc --noEmit && tsc -p tsconfig.spec.json",
|
|
93
|
+
"lint": "eslint src tests runtime --max-warnings 0",
|
|
92
94
|
"clean": "rm -rf .turbo dist"
|
|
93
95
|
}
|
|
94
96
|
}
|