@lglab/react-qr-code 1.0.1 → 1.2.0

package/README.md

@@ -0,0 +1,6 @@
+# @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/)

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,11 +13,16 @@ 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';
+
+export declare interface DownloadOptions {
+    name?: string;
+    format?: DownloadFileFormat;
+    size?: number;
+}
+
 export declare type ERROR_LEVEL_MAPPED_TYPE = {
     [index in ErrorCorrectionLevel]: qrcodegen.QrCode.Ecc;
 };
@@ -41,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.
  */
@@ -202,7 +224,7 @@ export declare const ReactQRCode: {
 };
 
 export declare interface ReactQRCodeProps {
-    ref?: Ref<SVGSVGElement>;
+    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.
@@ -226,10 +248,6 @@ export declare interface ReactQRCodeProps {
      * @defaultValue 0
      */
     marginSize?: number;
-    /**
-     * The title to assign to the QR Code. Used for accessibility reasons.
-     */
-    title?: string;
     /**
      * The minimum version used when encoding the QR Code. Valid values are 1-40
      * with higher values resulting in more complex QR Codes. The optimal
@@ -246,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.
      */
@@ -273,4 +294,9 @@ export declare interface ReactQRCodeProps {
     svgProps?: React.SVGProps<SVGSVGElement>;
 }
 
+export declare interface ReactQRCodeRef {
+    svg: SVGSVGElement | null;
+    download: (options: DownloadOptions) => void;
+}
+
 export { }