dphelper 1.9.69 → 1.9.71

package/README.md

@@ -33,6 +33,7 @@
    2. [Store](#store)
    3. [Session](#session)
    4. [Observer](#observer)
+   5. [useObserver](#useobserver)
 5. [Extension](#extension)
 6. [Security](#security)
 7. [License](#license)
@@ -126,6 +127,7 @@ You can see:
 * [State](https://a51.gitbook.io/dphelper/general/state)
 * [Store](https://a51.gitbook.io/dphelper/general/store)
 * [Observer](https://a51.gitbook.io/dphelper/general/observer)
+* [useObserver](https://a51.gitbook.io/dphelper/general/useobserver)
 * [List of functions](https://a51.gitbook.io/dphelper/general/tools)
 
 You can see more tutorials, information, and examples about **dpHelper** [clicking here](https://a51.gitbook.io/dphelper).
@@ -224,6 +226,21 @@ observer('myData', () => {
 state.myData = 'New value';
 ```
 
+## useObserver
+
+```js
+import 'dphelper';
+
+// Use the useObserver to log the changing state value
+useObserver(
+  () => console.log("State changed: ", state.count)
+  , 'state.count'
+);
+
+// Store a value in the state that changes every 5 seconds
+setInterval(() => state.count = Date.now(), 5000);
+```
+
 ## Store
 
 ### Persistent Storage with dpHelper

package/docs/index.md

@@ -33,6 +33,7 @@
    2. [Store](#store)
    3. [Session](#session)
    4. [Observer](#observer)
+   5. [useObserver](#useobserver)
 5. [Extension](#extension)
 6. [Security](#security)
 7. [License](#license)
@@ -126,6 +127,7 @@ You can see:
 * [State](https://a51.gitbook.io/dphelper/general/state)
 * [Store](https://a51.gitbook.io/dphelper/general/store)
 * [Observer](https://a51.gitbook.io/dphelper/general/observer)
+* [useObserver](https://a51.gitbook.io/dphelper/general/useobserver)
 * [List of functions](https://a51.gitbook.io/dphelper/general/tools)
 
 You can see more tutorials, information, and examples about **dpHelper** [clicking here](https://a51.gitbook.io/dphelper).
@@ -224,6 +226,21 @@ observer('myData', () => {
 state.myData = 'New value';
 ```
 
+## useObserver
+
+```js
+import 'dphelper';
+
+// Use the useObserver to log the changing state value
+useObserver(
+  () => console.log("State changed: ", state.count)
+  , 'state.count'
+);
+
+// Store a value in the state that changes every 5 seconds
+setInterval(() => state.count = Date.now(), 5000);
+```
+
 ## Store
 
 ### Persistent Storage with dpHelper

package/documents/USEOBSERVER.md

@@ -0,0 +1,30 @@
+# useObserver
+
+## Overview
+
+This document provides a comprehensive list of all available useObserver functions in the `dpHelper` library along with their descriptions and examples.
+
+## Functions
+
+### useObserver(()=>{ YOUR CODE }, "state.name")
+
+- **Description:** Sets up an useObserver to monitor state changes and trigger a callback.
+- **Parameters:**
+  - `stateName` (string): The name of the state to monitor.
+  - `callBack` (Function): The callback function to run when the state changes.
+  - `option` (object): Additional options for the useObserver.
+
+- **Example:**
+  > The format is really similar to React useEffect
+
+  ```javascript
+  useObserver(
+    () => {
+      console.log('State changed:', newValue);
+    }, 'state.test'
+  );
+  ```
+
+## License
+
+This project is licensed under the Private License.

package/index.d.ts

@@ -13,6 +13,7 @@
 /// <reference path="./types/dphelper.d.ts" />
 /// <reference path="./types/memorio.d.ts" />
 /// <reference path="./types/observer.d.ts" />
+/// <reference path="./types/useObserver.d.ts" />
 /// <reference path="./types/state.d.ts" />
 /// <reference path="./types/session.d.ts" />
 /// <reference path="./types/store.d.ts" />