{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-fancy-qrcode"],"cli":null},"imports":["import { QRCode } from 'react-fancy-qrcode';","import type { QRCodeProps } from 'react-fancy-qrcode';","import type { QRCodeErrorCorrection } from 'react-fancy-qrcode';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}