@arbisoft/react-design-tool 1.0.22 → 1.0.24

package/README.md

@@ -1,4 +1,3 @@
-
 # 🎨 React Design Tool (by @arbisoft)
 
 A React component for creating and editing designs with templates, images, and customizable elements.  
@@ -12,37 +11,45 @@ With this tool, you can:
 - **Save** the final design data and image output
 
 Perfect for integrating into applications that require user-driven visual content creation.
- ## 🎬 Studio Preview
+
+## 🎬 Studio Preview
 
 **Live Walkthrough (GIF)**
 
 ![Studio Editor Screenshot](https://i.ibb.co/M5hZtFTG/design-tool.gif)
+
 ## 🖥️ Demo
 
 Check out the live demo here:
 
- [![Live Demo](https://img.shields.io/badge/Live-Demo-blue?style=for-the-badge)](https://codesandbox.io/p/sandbox/fdftlr)
+[![Live Demo](https://img.shields.io/badge/Live-Demo-blue?style=for-the-badge)](https://codesandbox.io/p/sandbox/fdftlr)
 
 ## 📦 Installation( react >= 19 )
 
 ```bash
 npm install @arbisoft/react-design-tool
 ```
+
 OR
+
 ```bash
 yarn add @arbisoft/react-design-tool
 
 ```
+
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.21
+npm install @arbisoft/react-design-tool@1.0.23
 ```
+
 OR
+
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.19
+yarn add @arbisoft/react-design-tool@1.0.23
 
 ```
+
 ## 🚀 Quick Start
 
 ```jsx
@@ -50,197 +57,267 @@ import React, { useRef } from 'react';
 import { Studio } from '@arbisoft/react-design-tool';
 
 function MyComponent() {
-  const studioRef = useRef(null);
-
-  return (
-    <Studio
-      ref={studioRef}
-      defaultTemplatesList={[]}
-      customTemplatesList={[]}
-      defaultImages={[]}
-      customImages={[]}
-      uploadImageCallBack={async (file) => {
-        // Upload logic here
-        return 'url_of_uploaded_image';
-      }}
-      elementsList={[]}
-      qrLink={'http://example.com'}
-      disableWhiteLabel={true}
-      title={'New Title'}
-      styleProps={{
-          primaryColor: 'red',
-      }}
-      defaultText={'Your Default Text'}
-      onSave={async (data) => {
-        console.log('Saved data:', data);
-      }}
-      saveButtonText={'Save Progress'}
-      locale={'en'}
-    />
-  );
+    const studioRef = useRef(null);
+
+    return (
+        <Studio
+            ref={studioRef}
+            defaultTemplatesList={[]}
+            customTemplatesList={[]}
+            defaultImages={[]}
+            customImages={[]}
+            uploadImageCallBack={async file => {
+                // Upload logic here
+                return 'url_of_uploaded_image';
+            }}
+            elementsList={[]}
+            qrLink={'http://example.com'}
+            disableWhiteLabel={true}
+            title={'New Title'}
+            styleProps={{
+                primaryColor: 'red',
+            }}
+            defaultText={'Your Default Text'}
+            onSave={async data => {
+                console.log('Saved data:', data);
+            }}
+            saveButtonText={'Save Progress'}
+            locale={'en'}
+        />
+    );
 }
 
 export default MyComponent;
 ```
+
 ## Props Configuration
 
 #### 1. `defaultTemplatesList` (Array of templates)
+
 Pre-loaded default templates provided by the system.  
 **Format:** Array of template objects  
 **Example:**
+
 ```js
 defaultTemplatesList={[
-  { 
-    title: 'Business Card', 
-    image: 'url', 
-    elements: [...] 
+  {
+    title: 'Business Card',
+    image: 'url',
+    elements: [...]
   }
 ]}
 ```
-#### 2. `customTemplatesList` (Array of templates)  
+
+#### 2. `customTemplatesList` (Array of templates)
+
 **Format:** Array of template objects  
 **Example:**
+
 ```js
 customTemplatesList={[
-  { 
-    title: 'Custom template', 
-    image: 'url', 
-    elements: [...] 
+  {
+    title: 'Custom template',
+    image: 'url',
+    elements: [...]
   }
 ]}
 ```
-#### 3. `defaultImages` (Array of URLs)  
+
+#### 3. `defaultImages` (Array of URLs)
+
 System-provided stock images.
 
 **Format:** Array of image urls  
 **Example:**
+
 ```js
 defaultImages={[
   "https://example.com/stock1.jpg",
   "https://example.com/stock2.png"
 ]}
 ```
-#### 4. `customImages` (Array of URLs)  
+
+#### 4. `customImages` (Array of URLs)
+
 User-uploaded or organization-specific images.
 
 **Format:** Array of image urls  
 **Example:**
+
 ```js
 customImages={[
   "https://example.com/stock1.jpg",
   "https://example.com/stock2.png"
 ]}
 ```
-#### 5. `uploadImageCallBack` (Async function)  
+
+#### 5. `uploadImageCallBack` (Async function)
+
 User-defined function to handle file uploads and return a hosted URL.  
 By default, the component handles images as base64, which may not be ideal for storage.  
 To avoid large payloads and for better performance, it's recommended to upload the file and return the hosted URL.
 
 **Example:**
+
 ```js
 uploadImageCallBack={async (file) => {
   // Upload logic here
   return 'https://yourcdn.com/uploaded-image.png';
 }}
 ```
-#### 6. `elementsList` (Array of elements)  
+
+#### 6. `elementsList` (Array of elements)
+
 An array of design elements to be rendered on the canvas by default.  
 If you pass an `elementsList`, the Studio will initialize with these elements already placed on the canvas.
 
 **Example:**
+
 ```js
 elementsList={[
   {...},{...},{...}
 ]}
 ```
-#### 7. `qrLink` (URL String)  
+
+#### 7. `qrLink` (URL String)
+
 A URL string used to generate a QR code element on the canvas.  
 When scanned, the QR will redirect to this link.
 
 **Example:**
+
 ```js
 qrLink={'https://somelink.com'}
 ```
-#### 8. `disableWhiteLabel` (Boolean)  
+
+#### 8. `disableWhiteLabel` (Boolean)
+
 Boolean flag to hide the white-label (branding) section from the sidebar.  
 Set to `true` if you want to remove branding options from the sidebar.
 
 **Example:**
+
 ```js
 disableWhiteLabel={true}
 ```
-#### 9. `title` (String)  
+
+#### 9. `title` (String)
+
 Sets the title for the current template being edited in the Studio.
 
 **Example:**
+
 ```js
 title={'New Title'}
 ```
-#### 10. `styleProps` (Object)  
+
+#### 10. `styleProps` (Object)
+
 Use this to customize the styling of the Studio, including elements like the sidebar pills.  
 For example, by providing a `primaryColor`, you can change the color of the sidebar pills to match your branding color.
 
 **Example:**
+
 ```js
 styleProps={{
   primaryColor: 'red',
 }}
 ```
-#### 11. `defaultText` (String)  
+
+#### 11. `defaultText` (String)
+
 Overrides the predefined text content in the text section of the Studio.  
 There is a list of predefined texts that can be added to the canvas by clicking on them, each with predefined fonts and styles.  
 By providing this prop, you can change the default content for these texts.
 
 **Example:**
+
 ```js
 defaultText={'Your Default Text'}
 ```
-#### 12. `onSave` (Async function)  
+
+#### 12. `defaultQrLogo` (String)
+
+Sets a default logo image to appear inside the QR code when the Studio loads.
+
+**Example:**
+
+```js
+defaultQrLogo={'https://yourcdn.com/qr-logo.png'}
+```
+
+#### 13. `onSave` (Async function)
+
 By providing this function, a "Save" Call-to-Action (CTA) button will appear in the Studio.  
 When the user clicks on this button, the function will be executed, and you will receive the current design data.  
 This data includes an array of elements and the image of the canvas. You can then use this data as needed, such as storing the elements and image.
 
 **Example:**
+
 ```js
 onSave={async (data) => {
-  console.log('Saved data:', data); 
+  console.log('Saved data:', data);
   // { elements: [array of elements],image:canvas image }
   // You can store this data or perform any actions you'd like
 }}
 ```
-#### 13. `saveButtonText` (String)  
+
+#### 14. `saveButtonText` (String)
+
 Overrides the text for the Call-to-Action (CTA) button that appears in the Studio.
 
 **Example:**
+
 ```js
 saveButtonText={'Save Progress'}
 ```
-#### 14. `locale` (String)  
+
+#### 15. `locale` (String)
+
 Sets the locale for the Studio to provide multilingual support.  
 You can set the `locale` prop to one of the supported languages: `"fr"`, `"en"`, `"ru"`, `"pl"`, `"de"`, `"es"`, or `"it"`.  
 The default locale is `"en"`.
 
 **Example:**
+
 ```js
 locale={'fr'}
 ```
-#### 15. `ref` (reference)  
-A reference to the `Studio` component.  
+
+#### 16. `ref` (reference)
+
+A reference to the `Studio` component.
+
 ```js
 const studioRef = useRef();
 
 <Studio
   ref={studioRef}
   ...
-/>  
+/>
 ```
-You can use this reference to call the `onSave` function whenever you want, and retrieve the updated elements and image of the canvas, along with any other data.
+
+You can access the following properties via `studioRef.current`:
+
+- `onSave()` – Manually trigger the save operation and retrieve the updated elements and image of the canvas, along with any other data.
+- `loading` – Get the current loading state (`boolean`).
+- `setLoading(true | false)` – Programmatically set the loading state of Studio.
 
 **Example:**
+
 ```js
+const studioRef = useRef();
+
+// Access loading state
+const isLoading = studioRef?.current?.loading;
+
+// Set loading state
+studioRef?.current?.setLoading(true);
+
+// Trigger save
 const handleSave = async () => {
-  const data = await studioRef?.current?.onSave();
-  console.log('Saved data:', data); 
-  // { elements: [array of elements], image: canvas image }
+    const data = await studioRef?.current?.onSave();
+    console.log('Saved data:', data);
+    // { elements: [array of elements], image: canvas image }
 };
 ```