{"_id":"@acutenetwork/fey2","_rev":"2-a00e891485b1f0524e22c94905b157fe","name":"@acutenetwork/fey2","dist-tags":{"latest":"1.9.3"},"versions":{"1.9.2":{"name":"@acutenetwork/fey2","version":"1.9.2","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design","react-native","react-native-svg"],"author":{"name":"Denys Kozak","email":"kozak.denys.dev@gmail.com"},"license":"MIT","_id":"@acutenetwork/fey2@1.9.2","maintainers":[{"name":"emekaorji","email":"emekapraiseo@gmail.com"}],"homepage":"https://qr-code-styling.com","bugs":{"url":"https://github.com/kozakdenys/qr-code-styling/issues"},"dist":{"shasum":"88fc370c60adb7d68b64a9dc219f968c1daf7f3f","tarball":"https://registry.npmjs.org/@acutenetwork/fey2/-/fey2-1.9.2.tgz","fileCount":104,"integrity":"sha512-6t+EhGIFl2kWPa0jmlz+J/F9xL3I4c5YYKRa+7hzNaZ1cSscf/hosbxlO1xbh24V+07Ym8o66h6eJ9BgMHU/0Q==","signatures":[{"sig":"MEUCIC90ZeYwFN8mH6kc8XkizfD9cT9L6VeyYcpGpldooYamAiEAvWQyVidOZbMWYsFPzKmTRcFhok9bqILYD0YcAX0cXoE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":967568},"main":"lib/qr-code-styling.js","types":"lib/index.d.ts","engines":{"node":">=18.18.0"},"gitHead":"43d41710221204858ccbd5b5065ec41d23b50544","scripts":{"test":"jest","build":"webpack --mode=production --config webpack.config.build.js","start":"webpack serve --open --config webpack.config.dev-server.js","build:dev":"webpack --mode=development --config webpack.config.build.js","ci:release":"npm publish --yes","commit-version":"git add . && git commit -m \"chore(release): v`node -p 'require(\"./package.json\").version'`\"","ci:versionup:major":"npm version major --no-git-tag-version --yes && npm run commit-version","ci:versionup:minor":"npm version minor --no-git-tag-version --yes && npm run commit-version","ci:versionup:patch":"npm version patch --no-git-tag-version --yes && npm run commit-version"},"_npmUser":{"name":"emekaorji","email":"emekapraiseo@gmail.com"},"repository":{"url":"git+https://github.com/kozakdenys/qr-code-styling.git","type":"git"},"_npmVersion":"11.5.2","description":"Add a style and an image to your QR code","directories":{},"_nodeVersion":"22.15.1","dependencies":{"qrcode-generator":"^1.4.4"},"react-native":"src/index.native.ts","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","jsdom":"^25.0.1","canvas":"^2.11.2","eslint":"^9.12.0","ts-jest":"^29.2.5","webpack":"^5.95.0","prettier":"^3.3.3","ts-loader":"^9.5.1","@eslint/js":"^9.12.0","typescript":"^5.6.3","webpack-cli":"^5.1.4","@types/jsdom":"^21.1.7","webpack-merge":"^6.0.1","jest-fixed-jsdom":"^0.0.4","@types/eslint__js":"^8.42.3","typescript-eslint":"^8.8.1","eslint-plugin-jest":"^28.8.3","webpack-dev-server":"^5.1.0","html-webpack-plugin":"^5.6.0","eslint-webpack-plugin":"^4.2.0","eslint-config-prettier":"^9.1.0","filemanager-webpack-plugin":"^8.0.0"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-svg":">=12.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-native":{"optional":true},"react-native-svg":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/fey2_1.9.2_1774262650121_0.6472205699565972","host":"s3://npm-registry-packages-npm-production"}},"1.9.3":{"name":"@acutenetwork/fey2","version":"1.9.3","description":"Add a style and an image to your QR code","main":"lib/qr-code-styling.js","react-native":"src/index.native.ts","types":"lib/index.d.ts","exports":{".":{"react-native":{"types":"./src/index.native.d.ts","default":"./src/index.native.ts"},"default":{"types":"./lib/index.d.ts","default":"./lib/qr-code-styling.js"}}},"engines":{"node":">=18.18.0"},"dependencies":{"qrcode-generator":"^1.4.4"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-svg":">=12.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-native":{"optional":true},"react-native-svg":{"optional":true}},"devDependencies":{"@eslint/js":"^9.12.0","@types/eslint__js":"^8.42.3","@types/jsdom":"^21.1.7","canvas":"^2.11.2","eslint":"^9.12.0","eslint-config-prettier":"^9.1.0","eslint-plugin-jest":"^28.8.3","eslint-webpack-plugin":"^4.2.0","filemanager-webpack-plugin":"^8.0.0","html-webpack-plugin":"^5.6.0","jest":"^29.7.0","jest-fixed-jsdom":"^0.0.4","jsdom":"^25.0.1","prettier":"^3.3.3","ts-jest":"^29.2.5","ts-loader":"^9.5.1","typescript":"^5.6.3","typescript-eslint":"^8.8.1","webpack":"^5.95.0","webpack-cli":"^5.1.4","webpack-dev-server":"^5.1.0","webpack-merge":"^6.0.1"},"scripts":{"build":"webpack --mode=production --config webpack.config.build.js","build:dev":"webpack --mode=development --config webpack.config.build.js","test":"jest","start":"webpack serve --open --config webpack.config.dev-server.js","ci:versionup:patch":"npm version patch --no-git-tag-version --yes && npm run commit-version","ci:versionup:minor":"npm version minor --no-git-tag-version --yes && npm run commit-version","ci:versionup:major":"npm version major --no-git-tag-version --yes && npm run commit-version","commit-version":"git add . && git commit -m \"chore(release): v`node -p 'require(\"./package.json\").version'`\"","ci:release":"npm publish --yes"},"repository":{"type":"git","url":"git+https://github.com/kozakdenys/qr-code-styling.git"},"keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design","react-native","react-native-svg"],"author":{"name":"Denys Kozak","email":"kozak.denys.dev@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/kozakdenys/qr-code-styling/issues"},"homepage":"https://qr-code-styling.com","_id":"@acutenetwork/fey2@1.9.3","gitHead":"43d41710221204858ccbd5b5065ec41d23b50544","_nodeVersion":"22.15.1","_npmVersion":"11.5.2","dist":{"integrity":"sha512-AcCxj8kxt/n0PGf9qzoQvOvk9DHeagXW4OGsUcItAsA2Mt2G7Am524U4nAPcicxmNoTsMJSsXdA3CZ+qV5ELAA==","shasum":"4411a6649bed4d7f5d653b8b7eaacb800204acd6","tarball":"https://registry.npmjs.org/@acutenetwork/fey2/-/fey2-1.9.3.tgz","fileCount":105,"unpackedSize":960447,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA/ghlEhZoT0Jr1CwOUha1m2OZ28p36QY6OmjwCrZWvIAiEA0+KDwfXYMI4F17fEv4Fk2YAhfxOU/xIqsT8xfLPGH5g="}]},"_npmUser":{"name":"emekaorji","email":"emekapraiseo@gmail.com"},"directories":{},"maintainers":[{"name":"emekaorji","email":"emekapraiseo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/fey2_1.9.3_1774263120844_0.7121303595438775"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-23T10:44:10.041Z","modified":"2026-03-23T10:52:01.137Z","1.9.2":"2026-03-23T10:44:10.308Z","1.9.3":"2026-03-23T10:52:01.033Z"},"bugs":{"url":"https://github.com/kozakdenys/qr-code-styling/issues"},"author":{"name":"Denys Kozak","email":"kozak.denys.dev@gmail.com"},"license":"MIT","homepage":"https://qr-code-styling.com","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design","react-native","react-native-svg"],"repository":{"type":"git","url":"git+https://github.com/kozakdenys/qr-code-styling.git"},"description":"Add a style and an image to your QR code","maintainers":[{"name":"emekaorji","email":"emekapraiseo@gmail.com"}],"readme":"# QR Code Styling\n\nJavaScript library for generating styled QR codes with a wide range of customization options. Works in the browser, Node.js, and **React Native**.\n\n## Features\n\n- 6 dot styles: `square`, `dots`, `rounded`, `extra-rounded`, `classy`, `classy-rounded`\n- 3 corner square styles: `dot`, `square`, `extra-rounded`\n- 2 corner dot styles: `dot`, `square`\n- Linear and radial gradients for all elements\n- Center image overlay with auto-sizing\n- Circle-shaped QR codes\n- SVG and Canvas rendering (web)\n- React Native support via `react-native-svg`\n\n## Installation\n\n```bash\nnpm install qr-code-styling\n```\n\n### React Native additional dependencies\n\n```bash\nnpm install react-native-svg\n```\n\n## Usage\n\n### Browser / Web\n\n```js\nimport QRCodeStyling from \"qr-code-styling\";\n\nconst qrCode = new QRCodeStyling({\n  width: 300,\n  height: 300,\n  data: \"https://example.com\",\n  image: \"https://example.com/logo.png\",\n  dotsOptions: {\n    color: \"#4267b2\",\n    type: \"rounded\"\n  },\n  cornersSquareOptions: {\n    type: \"extra-rounded\"\n  },\n  backgroundOptions: {\n    color: \"#e9ebee\"\n  }\n});\n\nqrCode.append(document.getElementById(\"canvas\"));\n\n// Download as file\nqrCode.download({ name: \"qr\", extension: \"svg\" });\n```\n\n### React\n\n```jsx\nimport { useEffect, useRef } from \"react\";\nimport QRCodeStyling from \"qr-code-styling\";\n\nconst qrCode = new QRCodeStyling({\n  width: 300,\n  height: 300,\n  data: \"https://example.com\",\n  dotsOptions: {\n    color: \"#4267b2\",\n    type: \"rounded\"\n  }\n});\n\nfunction App() {\n  const ref = useRef(null);\n\n  useEffect(() => {\n    qrCode.append(ref.current);\n  }, []);\n\n  return <div ref={ref} />;\n}\n```\n\n### React Native\n\nBoth named and default imports work:\n\n```tsx\n// Named import\nimport { QRCodeStylingNative } from \"qr-code-styling\";\n\n// Or default import\nimport QRCodeStylingNative from \"qr-code-styling\";\n```\n\n```tsx\nimport { QRCodeStylingNative } from \"qr-code-styling\";\n\nfunction App() {\n  return (\n    <QRCodeStylingNative\n      options={{\n        width: 300,\n        height: 300,\n        data: \"https://example.com\",\n        image: \"https://example.com/logo.png\",\n        dotsOptions: {\n          color: \"#4267b2\",\n          type: \"rounded\"\n        },\n        cornersSquareOptions: {\n          type: \"extra-rounded\"\n        },\n        cornersDotOptions: {\n          type: \"dot\"\n        },\n        backgroundOptions: {\n          color: \"#e9ebee\"\n        }\n      }}\n    />\n  );\n}\n```\n\n#### Exporting in React Native\n\nUse the `onReady` callback to get access to export helpers:\n\n```tsx\nimport { QRCodeStylingNative } from \"qr-code-styling\";\nimport { Share } from \"react-native\";\n\nfunction App() {\n  const handleReady = ({ toDataURL }) => {\n    // toDataURL() returns a Promise<string> with a base64 data URI\n    toDataURL().then((dataUri) => {\n      Share.share({ url: dataUri });\n    });\n  };\n\n  return (\n    <QRCodeStylingNative\n      options={{\n        width: 300,\n        height: 300,\n        data: \"https://example.com\",\n        dotsOptions: { type: \"dots\", color: \"#000\" }\n      }}\n      onReady={handleReady}\n    />\n  );\n}\n```\n\n#### React Native Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `options` | `Partial<Options>` | QR code configuration (same as web, minus `nodeCanvas`/`jsdom`) |\n| `onReady` | `(helpers: { toDataURL: () => Promise<string> }) => void` | Called when SVG is rendered with export helpers |\n\n## Options\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `width` | `number` | `300` | Width of the QR code |\n| `height` | `number` | `300` | Height of the QR code |\n| `data` | `string` | `\"\"` | The data to encode |\n| `image` | `string` | `undefined` | URL of center image |\n| `type` | `\"canvas\" \\| \"svg\"` | `\"canvas\"` | Render type (web only) |\n| `shape` | `\"square\" \\| \"circle\"` | `\"square\"` | QR code shape |\n| `margin` | `number` | `0` | Margin around the QR code |\n| `qrOptions` | `object` | | QR generation options |\n| `imageOptions` | `object` | | Center image options |\n| `dotsOptions` | `object` | | Dot styling options |\n| `cornersSquareOptions` | `object` | | Corner square styling |\n| `cornersDotOptions` | `object` | | Corner dot styling |\n| `backgroundOptions` | `object` | | Background styling |\n\n### `qrOptions`\n\n| Property | Type | Default |\n|----------|------|---------|\n| `typeNumber` | `0 - 40` | `0` (auto) |\n| `mode` | `\"Numeric\" \\| \"Alphanumeric\" \\| \"Byte\" \\| \"Kanji\"` | auto |\n| `errorCorrectionLevel` | `\"L\" \\| \"M\" \\| \"Q\" \\| \"H\"` | `\"Q\"` |\n\n### `dotsOptions`\n\n| Property | Type | Default |\n|----------|------|---------|\n| `type` | `\"square\" \\| \"dots\" \\| \"rounded\" \\| \"extra-rounded\" \\| \"classy\" \\| \"classy-rounded\"` | `\"square\"` |\n| `color` | `string` | `\"#000\"` |\n| `gradient` | `Gradient` | `undefined` |\n| `roundSize` | `boolean` | `true` |\n\n### `cornersSquareOptions`\n\n| Property | Type | Default |\n|----------|------|---------|\n| `type` | `\"dot\" \\| \"square\" \\| \"extra-rounded\"` | `undefined` (follows dot type) |\n| `color` | `string` | `undefined` (follows dot color) |\n| `gradient` | `Gradient` | `undefined` |\n\n### `cornersDotOptions`\n\n| Property | Type | Default |\n|----------|------|---------|\n| `type` | `\"dot\" \\| \"square\"` | `undefined` (follows dot type) |\n| `color` | `string` | `undefined` (follows dot color) |\n| `gradient` | `Gradient` | `undefined` |\n\n### `imageOptions`\n\n| Property | Type | Default |\n|----------|------|---------|\n| `hideBackgroundDots` | `boolean` | `true` |\n| `imageSize` | `number` | `0.4` |\n| `margin` | `number` | `0` |\n| `crossOrigin` | `string` | `undefined` |\n| `saveAsBlob` | `boolean` | `true` |\n\n### `backgroundOptions`\n\n| Property | Type | Default |\n|----------|------|---------|\n| `color` | `string` | `\"#fff\"` |\n| `gradient` | `Gradient` | `undefined` |\n| `round` | `number` | `0` |\n\n### Gradient\n\n```ts\n{\n  type: \"linear\" | \"radial\",\n  rotation: number, // in radians\n  colorStops: [\n    { offset: 0, color: \"#000\" },\n    { offset: 1, color: \"#fff\" }\n  ]\n}\n```\n\n## API (Web)\n\n### `append(container: HTMLElement): void`\n\nAppends the QR code to a DOM container.\n\n### `update(options?: Partial<Options>): void`\n\nUpdates the QR code with new options.\n\n### `download(options?: { name?: string, extension?: \"svg\" | \"png\" | \"jpeg\" | \"webp\" }): Promise<void>`\n\nDownloads the QR code as a file.\n\n### `getRawData(extension?: \"svg\" | \"png\" | \"jpeg\" | \"webp\"): Promise<Blob | Buffer | null>`\n\nReturns the raw QR code data.\n\n### `applyExtension(extension: (svg: SVGElement, options: Options) => void): void`\n\nApplies a custom extension function to the SVG element.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}