@lglab/react-qr-code 1.1.0 → 1.2.1

package/README.md

@@ -1,6 +1,52 @@
+![React QR Code Header](https://github.com/LGLabGreg/react-qr-code/raw/main/media/repo-header.png)
+
 # @lglab/react-qr-code
 
 A highly customizable and lightweight QR code generator for React applications.
 
 🚀 **Live Demo:** [reactqrcode.com/demo](https://reactqrcode.com/demo)  
 📖 **Documentation:** [reactqrcode.com](https://reactqrcode.com/)
+
+## Quick Features
+
+- **Highly Customizable** - Style the finder patterns, modules, and colors exactly how you want.
+- **Performance Optimized** - Generates QR codes efficiently without sacrificing quality.
+- **SVG-Based Rendering** - Crisp and scalable output for web and print
+- **Developer-Friendly** - Style the finder patterns, modules, and colors exactly how you want.
+- **Highly Customizable** - Built with TypeScript, easy to use, and well-documented
+
+## Install
+
+```
+pnpm add @lglab/react-qr-code
+```
+
+or
+
+```
+npm i @lglab/react-qr-code
+```
+
+or
+
+```
+yarn add @lglab/react-qr-code
+```
+
+or
+
+```
+bun add @lglab/react-qr-code
+```
+
+## Quick Start
+
+```
+import { ReactQRCode } from '@lglab/react-qr-code'
+
+const Page = () => {
+  return (
+    <ReactQRCode value='https://reactqrcode.com' />
+  );
+}
+```

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 import { JSX } from 'react/jsx-runtime';
-import { Ref } from 'react';
+
+/**
+ * ReactQRCode props.
+ */
+export declare type BackgroundSettings = string | GradientSettings;
 
 export declare type CrossOrigin = 'anonymous' | 'use-credentials' | '' | undefined;
 
@@ -9,9 +13,6 @@ export declare interface DataModulesSettings {
     randomSize?: boolean;
 }
 
-/**
- * ReactQRCode props.
- */
 export declare type DataModulesStyle = 'square' | 'square-sm' | 'rounded' | 'leaf' | 'vertical-line' | 'horizontal-line' | 'circle' | 'diamond' | 'star' | 'heart';
 
 export declare type DownloadFileFormat = 'svg' | 'png' | 'jpeg';
@@ -49,6 +50,19 @@ export declare interface FinderPatternOuterSettings {
 
 export declare type FinderPatternOuterStyle = 'square' | 'rounded-sm' | 'rounded' | 'rounded-lg' | 'circle' | 'inpoint-sm' | 'inpoint' | 'inpoint-lg' | 'outpoint-sm' | 'outpoint' | 'outpoint-lg' | 'leaf-sm' | 'leaf' | 'leaf-lg';
 
+export declare interface GradientSettings {
+    type: GradientSettingsType;
+    stops: GradientSettingsStop[];
+    rotation?: number;
+}
+
+export declare interface GradientSettingsStop {
+    offset: string;
+    color: string;
+}
+
+export declare type GradientSettingsType = 'linear' | 'radial';
+
 /**
  * Image settings for the QR Code.
  */
@@ -210,7 +224,7 @@ export declare const ReactQRCode: {
 };
 
 export declare interface ReactQRCodeProps {
-    ref?: Ref<ReactQRCodeRef>;
+    ref?: React.Ref<ReactQRCodeRef>;
     /**
      * The value to encode into the QR Code. An array of strings can be passed in
      * to represent multiple segments to further optimize the QR Code.
@@ -250,11 +264,14 @@ export declare interface ReactQRCodeProps {
      */
     boostLevel?: boolean;
     /**
-     * The background color used to render the QR Code.
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     * The QR code background either a hex color or GradientSettings.
      * @defaultValue #FFFFFF
      */
-    bgColor?: string;
+    background?: BackgroundSettings;
+    /**
+     * The gradient settings applied to the qr code data modules and finder patterns.
+     */
+    gradient?: GradientSettings;
     /**
      * The settings for the data modules.
      */