@qrcodesdk/react 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @qrcodesdk/react
+
+## 0.0.1
+
+### Patch Changes
+
+- Initial release
+- Updated dependencies
+  - @qrcodesdk/browser@0.0.1
+  - @qrcodesdk/core@0.0.1

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2026 Dominik Dafert
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,310 @@
+<!-- Generated from apps/docs/src/content/docs/packages/react.mdx. Run `pnpm --filter docs generate-readmes` to update. -->
+
+<p align="center"><img src="https://qrcodesdk.dev/favicon.svg" alt="QRCodeSDK logo" width="240"></p>
+
+# @qrcodesdk/react
+
+[![Open @qrcodesdk/react on npmx.dev](https://npmx.dev/api/registry/badge/name/@qrcodesdk/react?color=7469B6&style=shieldsio)](https://npmx.dev/@qrcodesdk/react) ![@qrcodesdk/react version](https://npmx.dev/api/registry/badge/version/@qrcodesdk/react?color=7469B6&label=version&style=shieldsio) ![@qrcodesdk/react install size](<https://npmx.dev/api/registry/badge/size/@qrcodesdk/react?color=7469B6&label=install size&style=shieldsio>) ![@qrcodesdk/react download/mo](https://npmx.dev/api/registry/badge/downloads-month/@qrcodesdk/react?color=7469B6&label=download/mo&style=shieldsio) [![@qrcodesdk/react Source code](<https://npmx.dev/api/registry/badge/name/@qrcodesdk/react?color=7469B6&label=Source code&value=GitHub ↗&style=shieldsio>)](https://github.com/Dafnik/qrcodesdk/tree/main/packages/react)
+
+**[Live Demo](https://qrcodesdk.dev/playground/?package=react)**
+
+`@qrcodesdk/react` provides React components for rendering QR codes as inline SVG, PNG-backed Image elements, and Canvas elements.
+
+It supports React and React DOM 18 and 19.
+
+## Install
+
+```sh
+npm install @qrcodesdk/react @qrcodesdk/core @qrcodesdk/browser
+```
+
+```sh
+pnpm add @qrcodesdk/react @qrcodesdk/core @qrcodesdk/browser
+```
+
+<details>
+<summary>Other package managers</summary>
+
+**vp**
+
+```sh
+vp add @qrcodesdk/react @qrcodesdk/core @qrcodesdk/browser
+```
+
+**deno**
+
+```sh
+deno add @qrcodesdk/react @qrcodesdk/core @qrcodesdk/browser
+```
+
+**bun**
+
+```sh
+bun add @qrcodesdk/react @qrcodesdk/core @qrcodesdk/browser
+```
+
+**yarn**
+
+```sh
+yarn add @qrcodesdk/react @qrcodesdk/core @qrcodesdk/browser
+```
+
+</details>
+
+## Quick start
+
+Import the components directly where you need them:
+
+```tsx
+import {QRCodeCanvas, QRCodeImage, QRCodeSVG} from '@qrcodesdk/react';
+
+export function App() {
+  return (
+    <>
+      <QRCodeSVG data="https://qrcodesdk.dev" />
+      <QRCodeImage data="https://qrcodesdk.dev" />
+      <QRCodeCanvas data="https://qrcodesdk.dev" />
+    </>
+  );
+}
+```
+
+## Components
+
+| Component      | Output                                      | Download support |
+| -------------- | ------------------------------------------- | ---------------- |
+| `QRCodeSVG`    | Inline SVG inside a wrapper `<div>`         | SVG              |
+| `QRCodeImage`  | PNG-backed `<img>` inside a wrapper `<div>` | PNG              |
+| `QRCodeCanvas` | `<canvas>` inside a wrapper `<div>`         | None             |
+
+All components accept:
+
+| Prop        | Type                       | Description                                     |
+| ----------- | -------------------------- | ----------------------------------------------- |
+| `data`      | `string \| number`         | Required QR code payload.                       |
+| `options`   | Component-specific options | Optional matrix and renderer configuration.     |
+| `className` | `string`                   | CSS class applied to the component wrapper div. |
+
+`options` supports shared matrix options such as `version`, `mode`, `errorCorrectionLevel`, and `mask`. Renderer options match the corresponding QRCodeSDK renderer:
+
+- `QRCodeSVG` uses `QRCodeSVGOptions`.
+- `QRCodeImage` uses `QRCodeImageOptions`.
+- `QRCodeCanvas` uses `QRCodeCanvasOptions`.
+
+Import `QRCodeSVGOptions` from `@qrcodesdk/core`. Import `QRCodeImageOptions` and `QRCodeCanvasOptions` from `@qrcodesdk/browser`.
+
+## Matrix options
+
+The `options` prop combines the component's renderer options with the shared QR matrix options:
+
+| Option                 | Type                                     | Default   | Description             |
+| ---------------------- | ---------------------------------------- | --------- | ----------------------- |
+| `mode`                 | `'numeric' \| 'alphanumeric' \| 'octet'` | Automatic | Encoding mode.          |
+| `errorCorrectionLevel` | `'L' \| 'M' \| 'Q' \| 'H'`               | `'M'`     | Error correction level. |
+| `version`              | `1` through `40`                         | Automatic | Pins the QR version.    |
+| `mask`                 | `0` through `7`                          | Automatic | Pins the QR mask.       |
+
+Most applications should let the builder select the mode, version, and mask automatically.
+
+## Live examples
+
+### SVG component
+
+```tsx
+import {QRCodeSVG} from '@qrcodesdk/react';
+
+export default function QRCodeSVGExample() {
+  return (
+    <QRCodeSVG
+      data="https://qrcodesdk.dev"
+      options={{
+        title: 'QR code for qrcodesdk.dev',
+        ariaLabel: 'Scan to open qrcodesdk.dev',
+      }}
+    />
+  );
+}
+```
+
+### Image component
+
+```tsx
+import type {QRCodeImageOptions} from '@qrcodesdk/browser';
+import {QRCodeImage} from '@qrcodesdk/react';
+
+export default function QRCodeImageExample() {
+  const options: QRCodeImageOptions = {
+    size: 8,
+    margin: 4,
+    alt: 'QR code for qrcodesdk.dev',
+    ariaLabel: 'Scan to open qrcodesdk.dev',
+  };
+
+  return <QRCodeImage data="https://qrcodesdk.dev" options={options} />;
+}
+```
+
+### Canvas component
+
+```tsx
+import type {QRCodeCanvasOptions} from '@qrcodesdk/browser';
+import {QRCodeCanvas} from '@qrcodesdk/react';
+
+export default function QRCodeCanvasExample() {
+  const options: QRCodeCanvasOptions = {
+    size: 8,
+    margin: 4,
+    colors: {
+      colorDark: '#111827',
+      colorLight: '#ffffff',
+    },
+  };
+
+  return <QRCodeCanvas data="https://qrcodesdk.dev" options={options} />;
+}
+```
+
+### PNG download
+
+```tsx
+import {useRef} from 'react';
+
+import {QRCodeImage, type QRCodeDownloadHandle} from '@qrcodesdk/react';
+
+export default function QRCodeDownloadImageExample() {
+  const qrcode = useRef<QRCodeDownloadHandle>(null);
+
+  return (
+    <div className="flex flex-col items-center">
+      <QRCodeImage
+        data="https://qrcodesdk.dev"
+        options={{
+          alt: 'QR code for qrcodesdk.dev',
+        }}
+        ref={qrcode}
+      />
+      <button
+        className="btn-primary"
+        onClick={() => qrcode.current?.download('qrcodesdk')}
+        type="button">
+        Download PNG
+      </button>
+    </div>
+  );
+}
+```
+
+## Renderer options
+
+| Option                  | Components | Type                         |            Default |
+| ----------------------- | ---------- | ---------------------------- | -----------------: |
+| `size`                  | All        | `number`                     |                `5` |
+| `margin`                | All        | `number`                     |                `4` |
+| `colors.colorDark`      | All        | `string`                     |        `'#000000'` |
+| `colors.colorLight`     | All        | `string`                     |        `'#ffffff'` |
+| `dotsOptions`           | All        | `QRCodeDotsOptions`          | `{type: 'square'}` |
+| `cornersSquareOptions`  | All        | `QRCodeCornersSquareOptions` | `{type: 'square'}` |
+| `cornersDotOptions`     | All        | `QRCodeCornersDotOptions`    | `{type: 'square'}` |
+| `alt`                   | SVG, Image | `string`                     |        `undefined` |
+| `ariaLabel`             | SVG, Image | `string`                     |        `undefined` |
+| `title`                 | SVG, Image | `string`                     |        `undefined` |
+| `image.source`          | All        | Renderer-specific source     |        `undefined` |
+| `image.size`            | All        | `number`                     |              `0.4` |
+| `image.padding`         | All        | `number`                     |                `1` |
+| `image.clearBackground` | All        | `boolean`                    |             `true` |
+
+Color options use hash-prefixed values such as `#111827`. All built-in renderers require a positive safe integer `size` and a non-negative safe integer `margin`.
+
+Module, finder-ring, and finder-center options pass through to every component. Their optional
+colors independently inherit `colors.colorDark`.
+
+### Prepared center images
+
+Prepare browser image sources before rendering:
+
+```tsx
+import {useState} from 'react';
+
+import {QRCodeImage} from '@qrcodesdk/react';
+
+export function QRCodeWithLogo() {
+  const [logo, setLogo] = useState<HTMLImageElement>();
+
+  async function selectLogo(file: File) {
+    const source = new Image();
+    const localUrl = URL.createObjectURL(file);
+    source.src = localUrl;
+
+    try {
+      await source.decode();
+      setLogo(source);
+    } finally {
+      URL.revokeObjectURL(localUrl);
+    }
+  }
+
+  return (
+    <>
+      <input
+        accept="image/*"
+        type="file"
+        onChange={(event) => {
+          const file = event.currentTarget.files?.[0];
+          if (file) void selectLogo(file);
+        }}
+      />
+      {logo ? (
+        <QRCodeImage
+          data="https://qrcodesdk.dev"
+          options={{errorCorrectionLevel: 'H', image: {source: logo, size: 0.3}}}
+        />
+      ) : null}
+    </>
+  );
+}
+```
+
+Use an embedded `data:image/...` URL for `QRCodeSVG`. Components never load paths or URLs
+themselves, and SVG/PNG downloads include the overlay.
+
+## Download files
+
+- `QRCodeSVG` exposes `download(filename?)` and writes an SVG file through a React ref.
+- `QRCodeImage` exposes `download(filename?)` and writes a PNG file through a React ref.
+
+```tsx
+import {useRef} from 'react';
+
+import {QRCodeImage, type QRCodeDownloadHandle} from '@qrcodesdk/react';
+
+export function QRCodeDownload() {
+  const qrcode = useRef<QRCodeDownloadHandle>(null);
+
+  return (
+    <>
+      <button type="button" onClick={() => qrcode.current?.download('qrcodesdk')}>
+        Download PNG
+      </button>
+      <QRCodeImage ref={qrcode} data="https://qrcodesdk.dev" />
+    </>
+  );
+}
+```
+
+The appropriate `.svg` or `.png` extension is appended when necessary.
+
+`QRCodeCanvas` does not include a download method. Use `QRCodeImage` when you want built-in PNG download support.
+
+## Server-side rendering
+
+`QRCodeSVG` produces runtime-neutral SVG and can render on the server.
+
+`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.
+
+## Documentation
+
+- [@qrcodesdk/react](https://qrcodesdk.dev/packages/react/)
+- [Customize QR Codes](https://qrcodesdk.dev/advanced/customize/)
+- [Render SVG](https://qrcodesdk.dev/renderers/core/svg/)
+- [Render to an Image Element](https://qrcodesdk.dev/renderers/browser/image/)
+- [Render to Canvas](https://qrcodesdk.dev/renderers/browser/canvas/)

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import { QRCodeCanvasOptions, QRCodeImageOptions } from "@qrcodesdk/browser";
+import { QRCodeInputData, QRCodeSVGOptions } from "@qrcodesdk/core";
+//#region src/types.d.ts
+type QRCodeBaseProps<TOptions> = {
+  data: QRCodeInputData;
+  options?: TOptions;
+  className?: string;
+};
+type QRCodeDownloadHandle = {
+  download(filename?: string): void;
+};
+//#endregion
+//#region src/QRCodeCanvas.d.ts
+type QRCodeCanvasProps = QRCodeBaseProps<QRCodeCanvasOptions>;
+declare function QRCodeCanvas({ data, options, className }: QRCodeCanvasProps): import("react").JSX.Element;
+//#endregion
+//#region src/QRCodeImage.d.ts
+type QRCodeImageProps = QRCodeBaseProps<QRCodeImageOptions>;
+declare const QRCodeImage: import("react").ForwardRefExoticComponent<QRCodeImageProps & import("react").RefAttributes<QRCodeDownloadHandle>>;
+//#endregion
+//#region src/QRCodeSVG.d.ts
+type QRCodeSVGProps = QRCodeBaseProps<QRCodeSVGOptions>;
+declare const QRCodeSVG: import("react").ForwardRefExoticComponent<QRCodeSVGProps & import("react").RefAttributes<QRCodeDownloadHandle>>;
+//#endregion
+export { type QRCodeBaseProps, QRCodeCanvas, type QRCodeCanvasProps, type QRCodeDownloadHandle, QRCodeImage, type QRCodeImageProps, QRCodeSVG, type QRCodeSVGProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/QRCodeCanvas.tsx","../src/QRCodeImage.tsx","../src/QRCodeSVG.tsx"],"mappings":";;;KAEY,gBAAgB;EAC1B,MAAM;EACN,UAAU;EACV;;KAGU;EACV,SAAS;;;;KCFC,oBAAoB,gBAAgB;iBAEhC,eAAc,MAAM,SAAS,aAAY,oCAAiB,IAAA;;;KCE9D,mBAAmB,gBAAgB;cAElC,6BAAW,0BAAA,mCAAA,cAAA;;;KCNZ,iBAAiB,gBAAgB;cAEhC,2BAAS,0BAAA,iCAAA,cAAA"}

package/dist/index.mjs

@@ -0,0 +1,84 @@
+import { QRCodeCanvasRenderer, QRCodeDownloadImageRenderer, QRCodeDownloadSVGRenderer, QRCodeImageRenderer } from "@qrcodesdk/browser";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { QRCodeSVGRenderer, qrcode } from "@qrcodesdk/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/replace-children.ts
+function replaceElementChildren(element, child) {
+	element.replaceChildren(child);
+}
+//#endregion
+//#region src/QRCodeCanvas.tsx
+function QRCodeCanvas({ data, options, className }) {
+	const containerRef = useRef(null);
+	const canvasRenderer = useMemo(() => QRCodeCanvasRenderer(options), [options]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		replaceElementChildren(container, qrcode(data).config(options).render(canvasRenderer));
+	}, [
+		canvasRenderer,
+		data,
+		options
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		ref: containerRef
+	});
+}
+//#endregion
+//#region src/QRCodeImage.tsx
+const QRCodeImage = forwardRef(function QRCodeImage({ data, options, className }, ref) {
+	const containerRef = useRef(null);
+	const imageRenderer = useMemo(() => QRCodeImageRenderer(options), [options]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		replaceElementChildren(container, qrcode(data).config(options).render(imageRenderer));
+	}, [
+		data,
+		imageRenderer,
+		options
+	]);
+	useImperativeHandle(ref, () => ({ download(filename) {
+		qrcode(data).config(options).render(QRCodeDownloadImageRenderer({
+			renderer: imageRenderer,
+			filename
+		}));
+	} }), [
+		data,
+		imageRenderer,
+		options
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		ref: containerRef
+	});
+});
+//#endregion
+//#region src/QRCodeSVG.tsx
+const QRCodeSVG = forwardRef(function QRCodeSVG({ data, options, className }, ref) {
+	const svgRenderer = useMemo(() => QRCodeSVGRenderer(options), [options]);
+	const svg = useMemo(() => qrcode(data).config(options).render(svgRenderer), [
+		data,
+		options,
+		svgRenderer
+	]);
+	useImperativeHandle(ref, () => ({ download(filename) {
+		qrcode(data).config(options).render(QRCodeDownloadSVGRenderer({
+			renderer: svgRenderer,
+			filename
+		}));
+	} }), [
+		data,
+		options,
+		svgRenderer
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		dangerouslySetInnerHTML: { __html: svg }
+	});
+});
+//#endregion
+export { QRCodeCanvas, QRCodeImage, QRCodeSVG };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/replace-children.ts","../src/QRCodeCanvas.tsx","../src/QRCodeImage.tsx","../src/QRCodeSVG.tsx"],"sourcesContent":["export function replaceElementChildren(element: HTMLElement, child: Element): void {\n  element.replaceChildren(child);\n}\n","import {type QRCodeCanvasOptions, QRCodeCanvasRenderer} from '@qrcodesdk/browser';\nimport {useEffect, useMemo, useRef} from 'react';\n\nimport {replaceElementChildren} from './replace-children';\nimport type {QRCodeBaseProps} from './types';\nimport {qrcode} from '@qrcodesdk/core';\n\nexport type QRCodeCanvasProps = QRCodeBaseProps<QRCodeCanvasOptions>;\n\nexport function QRCodeCanvas({data, options, className}: QRCodeCanvasProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const canvasRenderer = useMemo(() => QRCodeCanvasRenderer(options), [options]);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    replaceElementChildren(container, qrcode(data).config(options).render(canvasRenderer));\n  }, [canvasRenderer, data, options]);\n\n  return <div className={className} ref={containerRef} />;\n}\n","import {\n  QRCodeDownloadImageRenderer,\n  type QRCodeImageOptions,\n  QRCodeImageRenderer,\n} from '@qrcodesdk/browser';\nimport {forwardRef, useEffect, useImperativeHandle, useMemo, useRef} from 'react';\n\nimport {replaceElementChildren} from './replace-children';\nimport type {QRCodeBaseProps, QRCodeDownloadHandle} from './types';\nimport {qrcode} from '@qrcodesdk/core';\n\nexport type QRCodeImageProps = QRCodeBaseProps<QRCodeImageOptions>;\n\nexport const QRCodeImage = forwardRef<QRCodeDownloadHandle, QRCodeImageProps>(function QRCodeImage(\n  {data, options, className},\n  ref,\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const imageRenderer = useMemo(() => QRCodeImageRenderer(options), [options]);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    replaceElementChildren(container, qrcode(data).config(options).render(imageRenderer));\n  }, [data, imageRenderer, options]);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      download(filename?: string) {\n        qrcode(data)\n          .config(options)\n          .render(\n            QRCodeDownloadImageRenderer({\n              renderer: imageRenderer,\n              filename,\n            }),\n          );\n      },\n    }),\n    [data, imageRenderer, options],\n  );\n\n  return <div className={className} ref={containerRef} />;\n});\n","import {QRCodeDownloadSVGRenderer} from '@qrcodesdk/browser';\nimport {type QRCodeSVGOptions, QRCodeSVGRenderer} from '@qrcodesdk/core';\nimport {forwardRef, useImperativeHandle, useMemo} from 'react';\n\nimport type {QRCodeBaseProps, QRCodeDownloadHandle} from './types';\nimport {qrcode} from '@qrcodesdk/core';\n\nexport type QRCodeSVGProps = QRCodeBaseProps<QRCodeSVGOptions>;\n\nexport const QRCodeSVG = forwardRef<QRCodeDownloadHandle, QRCodeSVGProps>(function QRCodeSVG(\n  {data, options, className},\n  ref,\n) {\n  const svgRenderer = useMemo(() => QRCodeSVGRenderer(options), [options]);\n  const svg = useMemo(\n    () => qrcode(data).config(options).render(svgRenderer),\n    [data, options, svgRenderer],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      download(filename?: string) {\n        qrcode(data)\n          .config(options)\n          .render(\n            QRCodeDownloadSVGRenderer({\n              renderer: svgRenderer,\n              filename,\n            }),\n          );\n      },\n    }),\n    [data, options, svgRenderer],\n  );\n\n  return <div className={className} dangerouslySetInnerHTML={{__html: svg}} />;\n});\n"],"mappings":";;;;;AAAA,SAAgB,uBAAuB,SAAsB,OAAsB;CACjF,QAAQ,gBAAgB,KAAK;AAC/B;;;ACOA,SAAgB,aAAa,EAAC,MAAM,SAAS,aAA+B;CAC1E,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,iBAAiB,cAAc,qBAAqB,OAAO,GAAG,CAAC,OAAO,CAAC;CAE7E,gBAAgB;EACd,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WAAW;EAEhB,uBAAuB,WAAW,OAAO,IAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,OAAO,cAAc,CAAC;CACvF,GAAG;EAAC;EAAgB;EAAM;CAAO,CAAC;CAElC,OAAO,oBAAC,OAAD;EAAgB;EAAW,KAAK;CAAe,CAAA;AACxD;;;ACRA,MAAa,cAAc,WAAmD,SAAS,YACrF,EAAC,MAAM,SAAS,aAChB,KACA;CACA,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,gBAAgB,cAAc,oBAAoB,OAAO,GAAG,CAAC,OAAO,CAAC;CAE3E,gBAAgB;EACd,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WAAW;EAEhB,uBAAuB,WAAW,OAAO,IAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,OAAO,aAAa,CAAC;CACtF,GAAG;EAAC;EAAM;EAAe;CAAO,CAAC;CAEjC,oBACE,YACO,EACL,SAAS,UAAmB;EAC1B,OAAO,IAAI,CAAC,CACT,OAAO,OAAO,CAAC,CACf,OACC,4BAA4B;GAC1B,UAAU;GACV;EACF,CAAC,CACH;CACJ,EACF,IACA;EAAC;EAAM;EAAe;CAAO,CAC/B;CAEA,OAAO,oBAAC,OAAD;EAAgB;EAAW,KAAK;CAAe,CAAA;AACxD,CAAC;;;ACpCD,MAAa,YAAY,WAAiD,SAAS,UACjF,EAAC,MAAM,SAAS,aAChB,KACA;CACA,MAAM,cAAc,cAAc,kBAAkB,OAAO,GAAG,CAAC,OAAO,CAAC;CACvE,MAAM,MAAM,cACJ,OAAO,IAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,OAAO,WAAW,GACrD;EAAC;EAAM;EAAS;CAAW,CAC7B;CAEA,oBACE,YACO,EACL,SAAS,UAAmB;EAC1B,OAAO,IAAI,CAAC,CACT,OAAO,OAAO,CAAC,CACf,OACC,0BAA0B;GACxB,UAAU;GACV;EACF,CAAC,CACH;CACJ,EACF,IACA;EAAC;EAAM;EAAS;CAAW,CAC7B;CAEA,OAAO,oBAAC,OAAD;EAAgB;EAAW,yBAAyB,EAAC,QAAQ,IAAG;CAAI,CAAA;AAC7E,CAAC"}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@qrcodesdk/react",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "@qrcodesdk/react provides React components for rendering QR codes as SVG, PNG-backed image elements, and canvas elements.",
+  "sideEffects": false,
+  "private": false,
+  "license": "MIT",
+  "author": {
+    "name": "Dafnik",
+    "email": "contact@dafnik.me",
+    "url": "https://dafnik.me"
+  },
+  "keywords": [
+    "typescript",
+    "types",
+    "qr-code",
+    "qrcode",
+    "qr",
+    "code",
+    "esm",
+    "modules",
+    "module",
+    "react",
+    "tsx",
+    "jsx"
+  ],
+  "homepage": "https://qrcodesdk.dev/packages/react",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Dafnik/qrcodesdk.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/Dafnik/qrcodesdk/issues"
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/Dafnik"
+    },
+    {
+      "type": "liberapay",
+      "url": "https://liberapay.com/Dafnik"
+    }
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@qrcodesdk/browser": "^0.0.1",
+    "@qrcodesdk/core": "^0.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "29.1.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "tsdown": "0.22.9",
+    "typescript": "7.0.2",
+    "vitest": "4.1.10",
+    "@qrcodesdk/browser": "0.0.1",
+    "@qrcodesdk/core": "0.0.1",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/core-testing": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "postbuild": "cp ../../LICENSE .",
+    "watch": "tsdown --watch",
+    "test": "vitest --watch false",
+    "test:coverage:raw": "vitest --coverage --watch false",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint src tests --max-warnings 0",
+    "clean": "rm -rf .turbo dist"
+  }
+}