@arbisoft/react-design-tool 1.0.21 → 1.0.23

package/README.md

@@ -40,7 +40,7 @@ npm install @arbisoft/react-design-tool@1.0.21
 ```
 OR
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.19
+yarn add @arbisoft/react-design-tool@1.0.21
 
 ```
 ## 🚀 Quick Start
@@ -195,7 +195,16 @@ By providing this prop, you can change the default content for these texts.
 ```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.
@@ -208,14 +217,14 @@ onSave={async (data) => {
   // 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"`.
@@ -224,23 +233,40 @@ The default locale is `"en"`.
 ```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); 
+    const data = await studioRef?.current?.onSave();
+    console.log('Saved data:', data);
   // { elements: [array of elements], image: canvas image }
 };
 ```