{"id":11703,"library":"react-fancy-qrcode","title":"React Fancy QR Code Generator","description":"react-fancy-qrcode is a JavaScript library designed for generating highly customizable QR codes within both React (web) and React Native applications. Currently stable at version 1.0.4, it offers extensive styling options including custom dot shapes via `dotRadius` and `dotScale`, linear gradients for both the primary QR code color and position markers, and the ability to embed a logo in the center. Its release cadence appears active, with an initial v1.0.0 production release followed by minor bug fixes, suggesting ongoing development and maintenance. A key differentiator is its comprehensive customization API, providing developers with fine-grained control over the visual presentation of the QR code, making it suitable for applications that require branded or aesthetically unique QR codes beyond standard implementations. It draws inspiration from `react-native-qrcode-svg` but expands significantly on visual flexibility for a wider range of design requirements.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/jgillick/react-fancy-qrcode","tags":["javascript","qrcode","react","react-native","typescript"],"install":[{"cmd":"npm install react-fancy-qrcode","lang":"bash","label":"npm"},{"cmd":"yarn add react-fancy-qrcode","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-fancy-qrcode","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering QR codes, especially in React Native environments. It is a peer dependency that must be installed manually.","package":"react-native-svg","optional":false}],"imports":[{"note":"The primary component for generating QR codes. While CommonJS `require` can work in some setups, ESM `import` is the recommended and type-safe approach, especially for React/React Native projects.","wrong":"const QRCode = require('react-fancy-qrcode');","symbol":"QRCode","correct":"import { QRCode } from 'react-fancy-qrcode';"},{"note":"Type definition for the `QRCode` component's props, useful for TypeScript projects to ensure correct prop usage and IDE auto-completion.","symbol":"QRCodeProps","correct":"import type { QRCodeProps } from 'react-fancy-qrcode';"},{"note":"Type definition for the `errorCorrection` prop, enumerating the possible error correction levels ('L', 'M', 'Q', 'H').","symbol":"QRCodeErrorCorrection","correct":"import type { QRCodeErrorCorrection } from 'react-fancy-qrcode';"}],"quickstart":{"code":"import React from 'react';\nimport { QRCode } from 'react-fancy-qrcode';\nimport { View } from 'react-native'; // Use 'div' for web React\n\n// For demonstration purposes, assuming 'fire.png' exists in './assets/'\n// In a real application, ensure the image path is correct for your bundler (web) or Metro (React Native).\n// Or use a base64 encoded string for the logo prop directly.\nconst FireImage = require('./assets/fire.png');\n\nfunction App() {\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' }}>\n      <QRCode\n        value={\"https://checklist.day/package/react-fancy-qrcode?utm_source=demo\"}\n        size={300}\n        dotScale={0.75}\n        dotRadius=\"40%\"\n        positionRadius={[\"6%\", \"2%\"]}\n        errorCorrection=\"H\"\n        logo={FireImage}\n        logoSize={60} // Explicitly set to avoid obscuring too much data\n        backgroundColor=\"white\"\n        color={[\"#00008b\", \"#4169e1\"]} // Example: Navy to Royal Blue linear gradient\n        colorGradientDirection={['0%', '0%', '100%', '100%']}\n        positionColor={[\"#8b0000\", \"#dc143c\"]} // Example: Dark Red to Crimson linear gradient\n        positionGradientDirection={['0%', '100%', '100%', '0%']}\n        margin={10}\n      />\n    </View>\n  );\n}\n\nexport default App;","lang":"typescript","description":"This example demonstrates how to render a highly customized QR code using the `QRCode` component. It includes custom dot shapes, gradient colors for both the QR code and its position markers, and an embedded logo, illustrating a wide range of available props."},"warnings":[{"fix":"Adjust `logoSize` to be no more than 20% of the `size` prop and test the QR code's scannability thoroughly across different error correction levels.","message":"When embedding a `logo`, ensure `logoSize` does not exceed approximately 20% of the `size` prop. Larger logos can obscure critical QR code data, rendering the code unscannable, especially with lower `errorCorrection` levels.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Navigate to your React Native project root and execute `npx pod-install ios`. Rebuild your iOS application afterwards.","message":"For React Native iOS projects, after installing `react-fancy-qrcode` and its peer dependency `react-native-svg`, you must run `npx pod-install ios` to link the native modules. Failing to do so will result in runtime errors related to `react-native-svg`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Adjust the `errorCorrection` prop (e.g., `errorCorrection='H'`) to match the level of resilience needed. Higher levels may result in slightly denser QR codes.","message":"The `errorCorrection` prop (default 'M') significantly impacts a QR code's resilience to damage (e.g., logos, smudges). 'L' offers the least robustness, while 'H' offers the most. Choose an appropriate level based on your application's requirements and expected usage environment.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `react-native-svg` via `npm install --save react-native-svg` or `yarn add react-native-svg`. For iOS, also run `npx pod-install ios` and rebuild the app.","cause":"`react-native-svg` is a required peer dependency but was not installed or linked correctly in a React Native project.","error":"Invariant Violation: `react-native-svg` module not found."},{"fix":"For web, ensure your bundler (Webpack, Vite) is configured to handle image imports. For React Native, verify the image path is correct relative to the component and the Metro bundler is running. Alternatively, use a base64 string or a URL for the `logo` prop.","cause":"Attempting to use `require()` for local image assets (e.g., `logo={require(\"...\")}`) in a web environment without proper bundler configuration for asset handling, or in specific React Native setups where `require` might not resolve the asset.","error":"TypeError: undefined is not a function (evaluating 'require(\"./assets/fire.png\")')"},{"fix":"Ensure `react-fancy-qrcode` is updated to the latest version (`npm update react-fancy-qrcode` or `yarn upgrade react-fancy-qrcode`). If the problem persists, clear your `node_modules` and `package-lock.json`/`yarn.lock` and reinstall dependencies, then restart your TypeScript language server or IDE.","cause":"This TypeScript error often indicates a mismatch between the installed library version and its type definitions. This can happen if an older version's types are being used, or the project's TypeScript configuration isn't correctly picking up the latest type definitions.","error":"Property 'dotScale' does not exist on type 'IntrinsicAttributes & QRCodeProps'."}],"ecosystem":"npm"}