Registry / web-framework / react-fancy-qrcode

react-fancy-qrcode

library1.0.4jsnpmunverified

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.

web-framework serialization

npm install react-fancy-qrcode

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-FANCY-QRCODE

react-fancy-qrcode

web-frameworkjavascriptv1.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

QRCode

✓ import { QRCode } from 'react-fancy-qrcode';

✗ const QRCode = require('react-fancy-qrcode');

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.

QRCodeProps

✓ import type { QRCodeProps } from 'react-fancy-qrcode';

Type definition for the `QRCode` component's props, useful for TypeScript projects to ensure correct prop usage and IDE auto-completion.

QRCodeErrorCorrection

✓ import type { QRCodeErrorCorrection } from 'react-fancy-qrcode';

Type definition for the `errorCorrection` prop, enumerating the possible error correction levels ('L', 'M', 'Q', 'H').

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.

import React from 'react'; import { QRCode } from 'react-fancy-qrcode'; import { View } from 'react-native'; // Use 'div' for web React // For demonstration purposes, assuming 'fire.png' exists in './assets/' // In a real application, ensure the image path is correct for your bundler (web) or Metro (React Native). // Or use a base64 encoded string for the logo prop directly. const FireImage = require('./assets/fire.png'); function App() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' }}> <QRCode value={"https://checklist.day/package/react-fancy-qrcode?utm_source=demo"} size={300} dotScale={0.75} dotRadius="40%" positionRadius={["6%", "2%"]} errorCorrection="H" logo={FireImage} logoSize={60} // Explicitly set to avoid obscuring too much data backgroundColor="white" color={["#00008b", "#4169e1"]} // Example: Navy to Royal Blue linear gradient colorGradientDirection={['0%', '0%', '100%', '100%']} positionColor={["#8b0000", "#dc143c"]} // Example: Dark Red to Crimson linear gradient positionGradientDirection={['0%', '100%', '100%', '0%']} margin={10} /> </View> ); } export default App;

Debug

Known issues

gotchaWhen 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.

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.

affects: >=1.0.0

gotchaFor 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`.

fix

Navigate to your React Native project root and execute `npx pod-install ios`. Rebuild your iOS application afterwards.

affects: >=1.0.0

gotchaThe `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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

Invariant Violation: `react-native-svg` module not found.

`react-native-svg` is a required peer dependency but was not installed or linked correctly in a React Native project.

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.

TypeError: undefined is not a function (evaluating 'require("./assets/fire.png")')

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.

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.

Property 'dotScale' does not exist on type 'IntrinsicAttributes & QRCodeProps'.

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.

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.

Upgrade

Version history

1.0.4latest on npm

Audit

Dependencies

react-native-svgrequiredRequired for rendering QR codes, especially in React Native environments. It is a peer dependency that must be installed manually.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/jgillick/react-fancy-qrcode ↗

packagehttps://www.npmjs.com/package/react-fancy-qrcode ↗