{"id":19348154,"url":"https://github.com/linb/react-hook-module","last_synced_at":"2026-01-31T03:00:46.863Z","repository":{"id":109496158,"uuid":"288239777","full_name":"linb/react-hook-module","owner":"linb","description":"A react module hook for real configurable app with stateful persistent module tree and peer-to-peer messaging mechanism","archived":false,"fork":false,"pushed_at":"2020-12-18T18:37:17.000Z","size":446,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-25T19:37:26.382Z","etag":null,"topics":["configurable-app","frontend","hook","interaction","module","peer-to-peer-messaging","react","reduct-replacement","state-management","stateful-persistent"],"latest_commit_sha":null,"homepage":"https://github.com/linb/react-module-hook","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-17T17:11:24.000Z","updated_at":"2020-12-18T18:37:19.000Z","dependencies_parsed_at":"2023-03-21T05:34:48.960Z","dependency_job_id":null,"html_url":"https://github.com/linb/react-hook-module","commit_stats":null,"previous_names":["linb/react-module-hook"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/linb/react-hook-module","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linb%2Freact-hook-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linb%2Freact-hook-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linb%2Freact-hook-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linb%2Freact-hook-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linb","download_url":"https://codeload.github.com/linb/react-hook-module/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linb%2Freact-hook-module/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28927761,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T02:59:34.861Z","status":"ssl_error","status_checked_at":"2026-01-31T02:59:05.369Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["configurable-app","frontend","hook","interaction","module","peer-to-peer-messaging","react","reduct-replacement","state-management","stateful-persistent"],"created_at":"2024-11-10T04:19:12.013Z","updated_at":"2026-01-31T03:00:46.812Z","avatar_url":"https://github.com/linb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-hook-module - version 0.3\nA react module hook for real configurable app with stateful persistent module tree and peer-to-peer messaging mechanism\n\nCreated for https://crossui.com/ReactBuilder, but can power any React project.\n\n## 1. Usage\n### 1.1. Install\n```javascript\nnpm install react-hook-module\n```\n\n### 1.2. Import\n```javascript\nimport { useModule } from \"react-hook-module\";\n```\n### 1.3. Call it in a render function\n```javascript\n...\nconst ReactComponent = props =\u003e {\n  const { module, auth, router, request } = useModule(props, {\n    // the default state for this module\n    state:{},\n    // the default props for this module\n    props:{\n        // enable HotKeys\n        enableHotKeys: true,\n        // enable router\n        enableRouter: true,\n        // enable auth\n        enableAuth: true,\n        // the request configure\n        enableRequest: true,\n        req_url : `${useModule.resolveURL( \"data/demo.json\" ) }`,\n        req_data : { key : \"value\" },\n        req_method : \"post\",\n        req_baseURL : null,\n        req_AUTH_TOKEN : null,\n        req_header : null,\n        req_config : null,\n        req_execute : true\n    },\n    // actions for this module\n    actions:{\"actionName\":()=\u003e()},\n    // for extra data\n    tagVar:{}    \n  }); \n\n  // ...\n  // return JSX;\n};\n```\n### 1.4. Use the component\n```javascript\n...\nconst ReactComSub1 = props =\u003e {\n  const { module } = useModule(props, { }); \n  return (\n    \u003cdiv\u003e\n      ReactComSub1\n    \u003c/div\u003e\n  );\n};\nconst ReactComSub2 = props =\u003e {\n  const { module } = useModule(props, { }); \n  return (\n    \u003cdiv\u003e\n      ReactComSub2 - {props.name}\n    \u003c/div\u003e\n  );\n};\nconst ReactCom = props =\u003e {\n  const { module } = useModule(props, {\n    state:{\n      items:[{\"name\":\"v1\"},{\"name\":\"v2\"}]\n    }\n  }); \n  const XReactComSub2 = module.enhanceCom(ReactComSub2);\n  return (\n    \u003cdiv\u003e\n      \u003cReactComSub1 usemodule_alias=\"alias1\" usemodule_uid=\"uid1\" usemodule_parent={module}/\u003e\n      \u003cReactComSub2 usemodule_alias=\"alias2\" usemodule_uid=\"uid2\" usemodule_parent={module}/\u003e\n      \u003cXReactComSub2 usemodule_alias=\"alias3\" usemodule_uid=\"uid3\" x_id=\"x_id1\" x_iterator={module.state.items}/\u003e\n    \u003c/div\u003e\n  );\n};\n```\n```\n[root]\n  │  \n  └─\u003cReactCom \u003e\n         │  \n         ├\u003cReactComSub1 usemodule_alias=\"alias1\"\u003e\n         │  \n         ├\u003cReactComSub2 usemodule_alias=\"alias2\"\u003e\n         │  \n         └\u003cXReactComSub2 usemodule_uid=\"alias3\" x_id=\"x_id1\"\u003e\n```\n\n## 2. API \n### 2.1. useModule static functions\n#### `useModule.getRootModule`\n----\n\u003e **useModule.getRootModule( )**  \n\u003e \u0026emsp;\u0026emsp;*Gets the root useModule element.*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The root useModule element.*  \n```javascript\n  // to get the root useModule element\n  const rootModule = useModule.getRootModule();\n```\n#### `useModule.getModule`\n----\n\u003e **useModule.getModule ( idOrAlias )**  \n\u003e \u0026emsp;\u0026emsp;*Gets the useModule element by uid (usemodule_uid) or alias (usemodule_alias). Getting from alias is only for the child elements in the root useModule element )*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The result useModule element*  \n\u003e **[parameters]**  \n\u003e * **idOrAlias** [required] : *String, The target useModule element's uid or alias*  \n```javascript\n  // to get an useModule element with usemodule_uid=\"global_uid1\"\n  const module1 = useModule.getModule(\"global_uid1\");\n  // to get an useModule element (It's a child element in the root useModule element) with usemodule_alias=\"alias1\"\n  const module2 = useModule.getModule(\"alias1\");\n  // to get an useModule element with alias path: [\"alias_in_root\", \"alias_in_level1\", \"alias_in_level2\"]\n  const module3 = useModule.getModule(\"alias_in_root.alias_in_level1.alias_in_level2\");  \n```\n#### `useModule.sendMessageTo`\n----\n\u003e **useModule.sendMessageTo ( receiver, message )**  \n\u003e \u0026emsp;\u0026emsp;*Sends a message to the target useModule element, which can  be received in it's onMessage event*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The return value of target useModule element's onMessage event*  \n\u003e **[parameters]**  \n\u003e * **receiver** [required] : *String or Object, The target useModule element, which can be an useModule object, useModule uid or alias (if it's a child  element in the root useModule element ).*  \n\u003e * **message** [required] : *Object / Any, The message, can be any value* \n```javascript\n  // to sent a message to module1\n  const result1 = useModule.sendMessageTo(module1, \"message\");\n  // to sent a message to an useModule element with usemodule_uid=\"global_uid1\"\n  const resul2 = useModule.sendMessageTo(\"global_uid1\", \"message\");\n  // to sent a message to an useModule element ( a child element in the root useModule element) with usemodule_alias=\"alias1\"\n  const resul3 = useModule.sendMessageTo(\"alias1\", \"message\");\n  // to sent a message to an useModule element with alias path: [\"alias_in_root\", \"alias_in_level1\", \"alias_in_level2\"]\n  const resul4 = useModule.sendMessageTo(\"alias_in_root.alias_in_level1.alias_in_level2\", \"message\");  \n```\n\n#### `useModule.dispatchActionTo`\n----\n\u003e **useModule.dispatchActionTo ( receiver, actionName, params, from)**  \n\u003e \u0026emsp;\u0026emsp;*Dispatches an action of the target useModule element*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The target action's return value*  \n\u003e **[parameters]**  \n\u003e * **receiver** [required] : *String or Object, The target useModule, which can be an useModule object, useModule uid or alias (only for those child elements in the root useModule element ).*  \n\u003e * **actionName** [required] : *String, The action name to be dispatched* \n\u003e * **params** [optional] : *Array, The parameters for the given action* \n\u003e * **from** [optional] : *Object/Any, The from info that indicates who dispatch the action or can be other info* \n```javascript\n  // to dispatch an action of module1\n  const result1 = useModule.dispatchActionTo(module1, \"actionName\", [/*parameters*/]);\n  // to dispatch an action of an useModule element with usemodule_uid=\"global_uid1\"\n  const resul2 = useModule.dispatchActionTo(\"global_uid1\", \"actionName\", [/*parameters*/]);\n  // to dispatch an action of an useModule element (a child element in the root useModule element) with usemodule_alias=\"alias1\"\n  const resul3 = useModule.dispatchActionTo(\"alias1\", \"actionName\", [/*parameters*/]);\n  // to dispatch an action of an useModule element with alias path: [\"alias_in_root\", \"alias_in_level1\", \"alias_in_level2\"]\n  const resul4 = useModule.dispatchActionTo(\"alias_in_root.alias_in_level1.alias_in_level2\", \"actionName\", [/*parameters*/]);\n```\n#### `useModule.dispatchAsyncActionTo`\n----\n\u003e **useModule.dispatchAsyncActionTo ( receiver, actionName, params, from)**  \n\u003e \u0026emsp;\u0026emsp;*Dispatches an asynchronous action of the target useModule element*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The target action's return value*  \n\u003e **[parameters]**  \n\u003e * **receiver** [required] : *String or Object, The target useModule, which can be an useModule object, useModule uid or alias (only for the child elements in the root useModule element ).*  \n\u003e * **actionName** [required] : *String, The asynchronous action name to be dispatched* \n\u003e * **params** [optional] : *Array, The parameters for the given action* \n\u003e * **from** [optional] : *Object/Any, The from info that indicates who dispatch the action or can be other info* \n```javascript\n  // to dispatch an action of module1, \n  const result1 = useModule.dispatchAsyncActionTo(module1, \"asyncActionName\", [/*parameters*/]);\n  // to dispatch an action of an useModule element with usemodule_uid=\"global_uid1\"\n  const resul2 = useModule.dispatchAsyncActionTo(\"global_uid1\", \"asyncActionName\", [/*parameters*/]);\n  // to dispatch an action of an useModule element (a child elemnt in the root useModule element) with usemodule_alias=\"alias1\"\n  const resul3 = useModule.dispatchAsyncActionTo(\"alias1\", \"asyncActionName\", [/*parameters*/]);\n  // to dispatch an action of an useModule element with alias path: [\"alias_in_root\", \"alias_in_level1\", \"alias_in_level2\"]\n  const resul4 = useModule.dispatchAsyncActionTo(\"alias_in_root.alias_in_level1.alias_in_level2\", \"asyncActionName\", [/*parameters*/]);\n```\n#### `useModule.updateStateFor`\n----\n\u003e **useModule.updateStateFor ( target, path, state, force )**  \n\u003e \u0026emsp;\u0026emsp;*Updates the module state for the target useModule element*  \n\u003e **[parameters]**  \n\u003e * **target** [required] : *String or Object, The target useModule element, which can be an useModule element object, useModule uid or alias (only for those chlid elements in the root useModule element ).*  \n\u003e * **path** [required] : *Object / Array\u003c String \u003e / String, **If it's an Array\u003c String \u003e: to** specify the path for updating the state; **If it's a String**: the string can be convert into an Array\u003c String \u003e after splitting by '.'; **If it's an Object**: to specify the whole object to update the state, the 2nd parameter - 'state' will be ignored in this case.* \n\u003e * **state** [optional] : *Object, The object to update the state in the given path* \n\u003e * **force** [optional] : *Boolean, Indicates whether force to update the state. Default is false.* \n```javascript\n  // to update state for module1\n  useModule.updateStateFor(module1, { key:\"value\" });\n  // to update state for an useModule element with usemodule_uid=\"global_uid1\"\n  useModule.updateStateFor(\"global_uid1\", \"key\", \"value\");\n  // to update state for an useModule element (a child element in the root useModule element) with usemodule_alias=\"alias1\"\n  useModule.updateStateFor(\"alias1\", \"keylevel1.keylevel2.keylevel3\", \"value\");\n  // to update state for an useModule element with alias path: [\"alias_in_root\", \"alias_in_level1\", \"alias_in_level2\"]\n  useModule.updateStateFor(\"alias_in_root.alias_in_level1.alias_in_level2\", \"key\", \"value\");\n```\n#### `useModule.fireEventTo`\n ----\n\u003e **useModule.fireEventTo ( target, eventName, params, from)**  \n\u003e \u0026emsp;\u0026emsp;*Fires an event of the target useModule element*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The return value of the target event*  \n\u003e **[parameters]**  \n\u003e * **target** [required] : *String or Object, The target useModule element, which can be an useModule element object, useModule uid or alias ( only for those child elements in the root useModule element ).*  \n\u003e * **eventName** [required] : *String, The event name* \n\u003e * **params** [optional] : *Array, The parameters for the given event* \n\u003e * **from** [optional] : *Object/Any, The from info that indicates who fire the event  or can be other info* \n```javascript\n  // to fire an event for module1\n  const result1 = useModule.fireEventFor(module1, \"eventName\", [/*parameters*/]);\n  // to fire an event for an useModule element with usemodule_uid=\"global_uid1\"\n  const resul2 = useModule.fireEventFor(\"global_uid1\", \"eventName\", [/*parameters*/]);\n  // to fire an event for an useModule element (a child element in the root useModule element) with usemodule_alias=\"alias1\"\n  const resul3 = useModule.fireEventFor(\"alias1\", \"eventName\", [/*parameters*/]);\n  // to fire an evnt for an useModule element with alias path: [\"alias_in_root\", \"alias_in_level1\", \"alias_in_level2\"]\n  const resul4 = useModule.fireEventFor(\"alias_in_root.alias_in_level1.alias_in_level2\", \"eventName\", [/*parameters*/]);\n```\n#### `useModule.broadcast`\n ----\n\u003e **useModule.broadcast ( channelName, message)**  \n\u003e \u0026emsp;\u0026emsp;*Broadcasts message to all useModule elements via a specified channel, which can be received in all useModule elements' onChannelMessage event*  \n\u003e **[parameters]**  \n\u003e * **channelName** [required] : *String, The channel name*  \n\u003e * **message** [required] : *Object / Any, The message object, can be any value* \n```javascript\n  // to broadcast an message to all useModule elements\n  useModule.broadcast(\"channelName\",\"message\");\n```\n#### `useModule.printModulesTree`\n ----\n\u003e **useModule.printModulesTree ( )**  \n\u003e \u0026emsp;\u0026emsp;*Prints the useModule element tree to the console window*  \n```javascript\n  // to print the whole useModule element tree onto the console\n  useModule.printModulesTree( );\n```\n#### `useModule.resolveURL`\n----\n\u003e **useModule.resolveURL ( relPath )**  \n\u003e \u0026emsp;\u0026emsp;*Resolves an url from a relative path. If you want to use a relative resource path in the CrossUI Designer, it's a must*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String, The resolved url*  \n\u003e **[parameters]**  \n\u003e * **relPath** [required] : *String, The relative path for an url* \n```javascript\n  // to resolve a relative path for the resource url\n  useModule.resolveURL(\"./img/pic.png\");\n```\n#### `useModule.getDataFromStore`\n ----\n\u003e **useModule.getDataFromStore ( path )**  \n\u003e \u0026emsp;\u0026emsp;*Gets data from the global store by the path*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The result data*  \n\u003e **[parameters]**  \n\u003e * **path** [required] : *Array\u003c String \u003e /  String, **If it's an Array\u003c String \u003e**: to specify the path for the data; **If it's a String**: the string can be convert into an Array\u003c String \u003e after splitting by '.'* \n#### `useModule.setDataToStore`\n ----\n\u003e **useModule.setDataToStore ( path, value, clonePath )**  \n\u003e \u0026emsp;\u0026emsp;*Sets data to the global store by the path*    \n\u003e **[parameters]**  \n\u003e * **path** [required] : *Array\u003c String \u003e /  String, **If it's an Array\u003c String \u003e**: to specify the path for the data; **If it's a String**: the string can be convert into an Array\u003c String \u003e after splitting by '.'* \n\u003e * **value** [required] : *Object / Any, The object to set* \n\u003e  * **clonePath** [optional] : *Boolean,  Determines whether to clone the path or not. Default is false.* \n```javascript\n  // to get data from the global store\n  useModule.setDataToStore(\"path_level1.path_level2\", {data:\"value\"}, false);\n  // reusult: \"value\"\n  useModule.getDataFromStore(\"path_level1.path_level2.data\");\n```\n### 2.2. useModule utils functions\n#### `useModule.utils.getRand`\n ----\n\u003e **useModule.utils.getRand ( preTag )**  \n\u003e \u0026emsp;\u0026emsp;*Gets a random string. The result like 'ca1gis'.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String, The random string.*  \n\u003e **[parameters]**  \n\u003e * **preTag** [optional] : *String, The previous tag for the random string. Default is empty string.* \n```javascript\n  // The result like 'ca1gis\n  useModule.getRand();\n  // The result like 'id_ca1gis'\n  useModule.getRand(\"id_\");\n```\n#### `useModule.utils.getNo`\n ----\n\u003e **useModule.utils.getNo ( preTag )**  \n\u003e \u0026emsp;\u0026emsp;*Gets a No. string. The result like 'a'.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String, The No. string.*  \n\u003e **[parameters]**  \n\u003e * **preTag** [optional] : *String, The previous tag for the No. string. Default is empty string.* \n```javascript\n  // The result like 'a'\n  useModule.utils.getNo();\n  // The result like 'id_a'\n  useModule.utils.getNo(\"id_\");\n```\n#### `useModule.utils.deepGet`\n ----\n\u003e **useModule.utils.deepGet ( object, path )**  \n\u003e \u0026emsp;\u0026emsp;*Gets data from the given object by the path.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object/Any, The result data.*  \n\u003e **[parameters]**  \n\u003e * **object** [required] : *Object, The target object.* \n\u003e * **path** [required] : *Array\u003c String \u003e / String, The path. **If it's an Array\u003c String \u003e**: to specify the path for the data; **If it's a String**: the string can be convert into an Array\u003c String \u003e after splitting by '.'* \n```javascript\n  // return 1\n  useModule.utils.deepGet({a:{b:{c:1}}},'a.b.c');\n  // return 1\n  useModule.utils.deepGet({a:{b:{c:1}}},[\"a\",\"b\",\"c\"]);\n```\n#### `useModule.utils.deepSet`\n ----\n\u003e **useModule.utils.deepSet ( object, path )**  \n\u003e \u0026emsp;\u0026emsp;*Sets data to the given object by the path.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object/Any, The target object.*  \n\u003e **[parameters]**  \n\u003e * **object** [required] : *Object, The target object.* \n\u003e * **path** [required] : *Array\u003c String \u003e / String, The path. **If it's an Array\u003c String \u003e**: to specify the path for the data; **If it's a String**: the string can be convert into an Array\u003c String \u003e after splitting by '.'* \n\u003e * **value** [required] : *Object/Any, The value to set.*  \n\u003e * **clonePath** [optional] : *Boolean, Determines whether to clone the path or not. Default is false.*  \n```javascript\n  // result : {a:{b:{c:2}}}\n  useModule.utils.deepSet({a:{b:{c:1}}},'a.b.c', 2);\n  // result : {a:{b:{c:[1,2,3]}}}\n  useModule.utils.deepSet({a:{b:{c:1}}},[\"a\",\"b\",\"c\"], [1,2,3]);\n```\n#### `useModule.utils.deepClone`\n ----\n\u003e **useModule.utils.deepClone ( object )**  \n\u003e \u0026emsp;\u0026emsp;*Clones the given object deeply.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object/Any, The cloned object.*  \n\u003e **[parameters]**  \n\u003e * **object** [required] : *Object, The target object to be cloned.*\n```javascript\n  const source = {a:{b:{c:1}}};\n  // cloned : {a:{b:{c:1}}}\n  // cloned.a === source.a      \u003e false\n  // cloned.a.b === source.a.b  \u003e false\n  const cloned = useModule.utils.deepClone(source);\n```\n#### `useModule.utils.toUTF8`\n ----\n\u003e **useModule.utils.toUTF8 ( source )**  \n\u003e \u0026emsp;\u0026emsp;*Converts a string to UTF-8 string.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String, The result UTF-8 string .*  \n\u003e **[parameters]**  \n\u003e * **utf8string** [required] : *String, The target string to be converted.*\n#### `useModule.utils.fromUTF8`\n ----\n\u003e **useModule.utils.fromUTF8 ( utf8string )**  \n\u003e \u0026emsp;\u0026emsp;*Converts an UTF-8 string back.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String, The result string .*  \n\u003e **[parameters]**  \n\u003e * **utf8string** [required] : *String, The target UTF-8 string to be converted.*\n```javascript\n  const source = '漢字';\n  // \"\\u6f22\\u5b57\"\n  const utf8 = useModule.utils.toUTF8(source);\n  // source === back\n  const back = useModule.utils.fromUTF8(utf8 );\n  console.log(utf8, back);\n```\n#### `useModule.utils.makeURLQueryString`\n ----\n\u003e **useModule.utils.makeURLQueryString ( hash )**  \n\u003e \u0026emsp;\u0026emsp;*Converts an object into an url query string.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String, The result query string.*  \n\u003e **[parameters]**  \n\u003e * **hash** [required] : *Object, The target object to be converted.*\n#### `useModule.utils.getURLParams`\n ----\n\u003e **useModule.utils.getURLParams ( querystring )**  \n\u003e \u0026emsp;\u0026emsp;*Converts an object into an url query string.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String, The result query string.*  \n\u003e **[parameters]**  \n\u003e * **querystring** [required] : *Object, The target querystring.*\n\u003e * **parameter** [optional] : *String, The parameter key string. If don't specify this, it will return an object that presents all parameters.*\n```javascript\n  const hash = {k1:\"v1\",k2:\"v2\"};\n  // return \"k1=v1\u0026k2=v2\"\n  const qs= useModule.utils.makeURLQueryString(hash);\n  // return {k1:\"v1\",k2:\"v2\"}\n  const back = useModule.utils.getURLParams(utf8 );\n  // return \"v2\"\n  const value = useModule.utils.getURLParams(utf8, \"k2\" );\n  console.log(qs, back, value );\n```\n#### `useModule.utils.getCookie`\n ----\n\u003e **useModule.utils.getCookie ( name )**  \n\u003e \u0026emsp;\u0026emsp;*Gets a specified cookie with the given name.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String/Object/Array, The result cookie for the given name. If it's a stringified object or array, it will return the original object or array.*  \n\u003e **[parameters]**  \n\u003e * **name** [required] : *String, The cookie name.*\n#### `useModule.utils.setCookie`\n ----\n\u003e **useModule.utils.setCookie ( name, value, options )**  \n\u003e \u0026emsp;\u0026emsp;*Creates a cookie with the given name, value, and options.*    \n\u003e **[parameters]**  \n\u003e * **name** [required] : *String, The cookie name.*\n\u003e * **value** [required] : *String/Object/Array, The value of cookie. If it's an Object or Array, a stringified string will be saved into Cookie.*\n\u003e * **options** [options] : *Object, The cookie options. { expires: Number for seconds, path: String, domain: String, maxAge: String, sameSite: Boolean, secure: Boolean, httpOnly: Boolean }.*\n#### `useModule.utils.removeCookie`\n ----\n\u003e **useModule.utils.removeCookie ( name )**  \n\u003e \u0026emsp;\u0026emsp;*Removes a specified cookie by the given name.*    \n\u003e **[parameters]**  \n\u003e * **name** [required] : *String, The cookie name.*\n#### `useModule.utils.clearCookie`\n ----\n\u003e **useModule.utils.clearCookie ( )**  \n\u003e \u0026emsp;\u0026emsp;*Clears all cookies.*    \n```javascript\n  useModule.utils.setCookie(\"c1\", \"v1\");\n  useModule.utils.setCookie(\"c2\", {k1:\"v1\",k2:\"v2\"});\n  // return \"v1\"\n  const cookie1 = useModule.utils.getCookie( \"c1\" );\n  // return {k1:\"v1\",k2:\"v2\"}\n  const cookie2 = useModule.utils.getCookie( \"c2\" );\n  console.log( cookie1, cookie2 );\n  useModule.utils.removeCookie( \"c1\" );\n  useModule.utils.clearCookie( );\n```\n#### `useModule.utils.getLocalStorage`\n ----\n\u003e **useModule.utils.getLocalStorage ( name )**  \n\u003e \u0026emsp;\u0026emsp;*Gets a specified local storage by the given name.*    \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String/Object/Array, The result local storage for the given name. If it's a stringified object or array, it will return the original object or array.*  \n\u003e **[parameters]**  \n\u003e * **name** [required] : *String, The local storage name.*\n#### `useModule.utils.setLocalStorage`\n ----\n\u003e **useModule.utils.setLocalStorage ( name, value )**  \n\u003e \u0026emsp;\u0026emsp;*Creates a local storage data with the given name and value.*    \n\u003e **[parameters]**  \n\u003e * **name** [required] : *String, The local storage name.*\n\u003e * **value** [required] : *String/Object/Array, The value of local storage. If it's an Object or Array, a stringified string will be saved into local storage.*\n#### `useModule.utils.removeLocalStorage`\n ----\n\u003e **useModule.utils.removeLocalStorage ( name )**  \n\u003e \u0026emsp;\u0026emsp;*Removes a specified local storage by the given name.*    \n\u003e **[parameters]**  \n\u003e * **name** [required] : *String, The local storage name.*\n#### `useModule.utils.clearLocalStorage`\n ----\n\u003e **useModule.utils.clearLocalStorage (  )**  \n\u003e \u0026emsp;\u0026emsp;*Clears all local storage.*    \n```javascript\n  useModule.utils.setLocalStorage (\"c1\", \"v1\");\n  useModule.utils.setLocalStorage (\"c2\", {k1:\"v1\",k2:\"v2\"});\n  // return \"v1\"\n  const sto1 = useModule.utils.getLocalStorage( \"c1\" );\n  // return {k1:\"v1\",k2:\"v2\"}\n  const sto2 = useModule.utils.getLocalStorage( \"c2\" );\n  console.log( sto1, sto2 );\n  useModule.utils.removeLocalStorage( \"c1\" );\n  useModule.utils.clearLocalStorage( );\n```\n#### `useModule.utils.postH5ChannelMessage`\n ----\n\u003e **useModule.utils.postH5ChannelMessage ( channelName, message)**  \n\u003e \u0026emsp;\u0026emsp;*Posts HTML5 message ( ref: window.BroadcastChannel ) to all browser windows via a specified channel, which can be received in all useModule components' onH5ChannelMessage event*  \n\u003e **[parameters]**  \n\u003e * **channelName** [required] : *String, The channel name*  \n\u003e * **message** [required] : *Object / Any, The message object, can be any value* \n```javascript\n  // to pose HTML5 message to all browser windows via \"channel1\"\n  useModule.utils.postH5ChannelMessage (\"channel1\",\"message\");\n```\n#### `useModule.utils.selectLocalFiles`\n ----\n\u003e **useModule.utils.selectLocalFiles ( contentType, multiple )**  \n\u003e \u0026emsp;\u0026emsp;*To show an browser's file dialog for selecting files. You must use 'await' to call it, and it must be in an async function.*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Array \u003c File \u003e, The result files.*  \n\u003e **[parameters]**  \n\u003e * **contentType** [optional] : *String, The content type. e.g. 'image/png', 'image/\\*'*  \n\u003e * **multiple** [optional] : *Boolean, Allows multiple files or not. Default is false* \n```javascript\n  import { useModule } from \"react-hook-module\";\n  //...\n  const App = props =\u003e {\n      const { module } = useModule(props, { }); \n      return (\n        \u003cdiv\u003e\n          \u003cbutton onClick={async () =\u003e {\n            const files = await useModule.utils.selectLocalFiles(\"image/*\", true);\n            console.log(files);\n          }}\u003emodule.request\u003c/button\u003e\n        \u003c/div\u003e\n      );\n  };\n```\n### 2.3. useModule instance - module functions\n#### `getRootModule`\n----\n\u003e **getRootModule ( )**  \n\u003e \u0026emsp;\u0026emsp;*Gets the root useModule element*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The root useModule element*  \n```javascript\n  // to get the root useModule element\n  const rootModule = module.getRootModule();\n```\n#### `getModule`\n----\n\u003e **getModule ( idOrAlias )**  \n\u003e \u0026emsp;\u0026emsp;*Gets the useModule element by uid (usemodule_uid) or alias (usemodule_alias). Getting from alias is only for the child elements in the root useModule element )*    \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The result module element*  \n\u003e **[parameters]**  \n\u003e * **idOrAlias** [required] : *String, The target useModule element's uid or alias*  \n```javascript\n  // to get an useModule element with usemodule_uid=\"global_uid1\"\n  const module1 = module.getModule(\"global_uid1\");\n  // to get an useModule element( a child element in the current module) with usemodule_alias=\"alias1\"\n  const module2 = module.getModule(\"alias1\");\n  // to get an useModule element with alias path: [\"alias_in_root\", \"alias_in_level1\", \"alias_in_level2\"]\n  const module3 = module.getModule(\"alias_in_root.alias_in_level1.alias_in_level2\");  \n```\n#### getModuleByAlias\n ----\n\u003e **getModuleByAlias ( alias )**  \n\u003e \u0026emsp;\u0026emsp;*Gets a useModule  element by the given alias in the current module, which must be a child element in the current module and has an alias (usemodule_alias property)*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The result module element*  \n\u003e **[parameters]**  \n\u003e * **alias** [required] : *String, The alias of the element* \n```javascript\n  // to get a child module in the current module with usemodule_alias=\"alias1\"\n  const childModule = module.getModuleByAlias(\"alias1\");\n```\n#### `sendMessage`\n----\n\u003e **sendMessage ( message )**  \n\u003e \u0026emsp;\u0026emsp;*Sends a message to the current useModule, which can  be received in it's onMessage event*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The return value of the module's onMessage event*  \n\u003e **[parameters]**  \n\u003e * **message** [required] : *Object / Any, The message object, can be any value* \n```javascript\n  // to sent a message\n  const result1 = module.sendMessage(\"message\");  \n```\n#### `dispatchAction`\n----\n\u003e **dispatchAction ( actionName, params, from )**  \n\u003e \u0026emsp;\u0026emsp;*Dispatches an action for the current useModule element*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The target action's return value*  \n\u003e **[parameters]**  \n\u003e * **actionName** [required] : *String, The action name to be dispatched* \n\u003e * **params** [optional] : *Array, The parameters for the given action* \n\u003e * **from** [optional] : *Object/Any, The from info that indicates who dispatch the action or can be other info* \n```javascript\n  // to dispatch an action\n  const result1 = module.dispatchAction(\"actionName\", [/*parameters*/]);\n```\n#### `dispatchAsyncAction`\n----\n\u003e **dispatchAsyncAction ( actionName, params, from)**  \n\u003e \u0026emsp;\u0026emsp;*Dispatches an asynchronous action for the current useModule element*  \n\u003e **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The target action's return value*  \n\u003e **[parameters]**  \n\u003e * **actionName** [required] : *String, The asynchronous action name to be dispatched* \n\u003e * **params** [optional] : *Array, The parameters for the given action* \n\u003e * **from** [optional] : *Object/Any, The from info that indicates who dispatch the action or can be other info* \n```javascript\n  // to dispatch an async action\n  const result1 = module.dispatchAsyncAction(\"asyncActionName\", [/*parameters*/]);\n``` \n#### `updateState`\n----\n\u003e **updateState ( path, state, force )**  \n\u003e \u0026emsp;\u0026emsp;*Updates the module state for the current useModule*  \n\u003e **[parameters]**  \n\u003e * **path** [required] : *Object / Array\u003c String \u003e / String, **If it's an Array\u003c String \u003e: ** to specify the path for updating the state; **If it's a String**: the string can be convert into an Array\u003c String \u003e after splitting by '.'; **If it's an Object**: to specify the whole object to update the state, the 2nd parameter - 'state' will be ignored  in this case.* \n\u003e * **state** [optional] : *Object/Any, The object to update the state in the given path* \n\u003e * **force** [optional] : *Boolean, Indicates whether force to update the state. Default is false.*\n```javascript\n  // If the old state is {key:'ovalue',key1:{key2:'ovalue'}}\n  // the new state will be {key:'nvalue',key1:{key2:'ovalue'}}\n  module.updateState({ \"key\":\"nvalue\" });\n  // the new state will be {key:'nvalue',key1:{key2:'nvalue'}}\n  module.updateState(\"key1,key2\", \"nvalue\");\n```\n#### `fireEvent`\n----\n\u003e **fireEvent ( eventName, params, from  )**  \n\u003e \u0026emsp;\u0026emsp;*Fires a specified event for the current useModule*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The return value of the target event*  \n\u003e **[parameters]**  \n\u003e * **eventName** [required] : *String, The event name* \n\u003e * **params** [optional] : *Array, The parameters for the given event* \n\u003e * **from** [optional] : *Object/Any, The from info that indicate who fire the event or can be other info* \n```javascript\n  // to fire an event \n  const result1 = module.fireEvent(\"eventName\", [/*parameters*/]);\n```\n#### `broadcast`\n ----\n\u003e **broadcast ( channelName, message )**  \n\u003e \u0026emsp;\u0026emsp;*Broadcasts message to all useModule elements via a specified channel, which can be received in all useModule components' onChannelMessage event.*  \n\u003e **[parameters]**  \n\u003e * **channelName** [required] : *String, The channel name*  \n\u003e * **message** [required] : *Object / Any, The message object, can be any value* \n```javascript\n  // to broadcast an message to all useModule elements\n  useModule.broadcast(\"channelName\",\"message\");\n```\n#### `useRef`\n ----\n\u003e **useRef ( refName, value )**  \n\u003e \u0026emsp;\u0026emsp;*Triggers a React.useRef to create a ref, which initialial value is 'value'. It can be retrieved by module.getRef('refName') .*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The ref*  \n\u003e **[parameters]**  \n\u003e * **refName** [required] : *String, The ref name* \n\u003e * **value** [optional] : *Object/Any, The given initialial value* \n#### `getRef`\n ----\n\u003e **getRef ( refName )**  \n\u003e \u0026emsp;\u0026emsp;*Gets a specified ref by the given name, this ref was created by module.useRef('refName', 'value').*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, The ref*  \n\u003e **[parameters]**  \n\u003e * **refName** [required] : *String, The ref name* \n```javascript\n  // to use(create) a ref\n  const ref = module.useRef(\"refName\", \"init vaule\");\n  // to get the ref\n  const ref1 = module.getRef(\"refName\");  \n  // or\n  const ref2 = module.refs[\"refName\"];\n```\n#### `renderComAs`\n ----\n\u003e **renderComAs ( x_id, replace, beforeNodes, afterNodes )**  \n\u003e \u0026emsp;\u0026emsp;*Renders an enhanced component (with a specified 'x_id') as a different  component or a set of components, which can be used as element replacement, or inserting additional elements before or after the element.*  \n\u003e **[parameters]**  \n\u003e * **x_id** [required] : *String, The target element's x_id. The target element must be an enhanced component which powered by module.enhanceCom()* \n\u003e * **replace** [optional] : *Object/Array/false,  A React element or React elements array, which will replace the current element in the UI. If specified [false], this parameter will be ignored. If specified [null], the original element will be restored. Default is null.* \n\u003e * **beforeNodes** [optional] : *Object/Array/false,  A React element or React elements array, which will be inserted before the current element. If specified [false], this parameter will be ignored. If specified [null], all beforeNodes will be removed. Default is null.* \n\u003e * **afterNodes** [optional] : *Object/Array/false,  A React element or React elements array, which will be inserted after the current element. If specified [false], this parameter will be ignored. If specified [null], all afterNodes will be removed. Default is null.* \n```javascript\n  const Com1= props =\u003e {\n\t  const { module } = useModule(props, { });\n\t  const XElem = module.enchanceCom(\"div\");\n\t  return (\n\t  \u003cdiv\u003e\n\t\t  \u003cXElem x_id=\"x_id1\"\u003eoriginal\u003c/XElem\u003e\n\t\t  \u003cbutton onClick={() =\u003e{\n\t\t\t  module.renderComAs(\"x_id\", \u003cinput /\u003e, false, false);\n\t\t  }}\u003ereplace\u003c/button\u003e\n\t\t  \u003cbutton onClick={() =\u003e{\n\t\t\t  module.renderComAs(\"x_id\", false, \u003cdiv\u003ebefore\u003c/div\u003e, false);\t\t  \n\t\t  }}\u003einsert before\u003c/button\u003e\n\t\t  \u003cbutton onClick={() =\u003e{\n\t\t\t  module.renderComAs(\"x_id\", false, false, \u003cdiv\u003eafter\u003c/div\u003e);\t\t  \n\t\t  }}\u003einsert after\u003c/button\u003e\t\t  \n\t\t  \u003cbutton onClick={() =\u003e{\n\t\t\t  module.renderComAs(\"x_id\", null, null, null);\n\t\t  }}\u003erestore\u003c/button\u003e\n\t  \u003c/div\u003e);\n  };\n```\n### 2.4. useModule instance - material-UI plugin functions\n#### `showSnackbar`\n ----\n\u003e **showSnackbar ( message )**  \n\u003e \u0026emsp;\u0026emsp;*To show a material-UI snackbar. It's an advanced function in material-UI plugin ( react-hook-module/plugin_mui )*  \n\u003e **[parameters]**  \n\u003e * **message** [required] : *String/Object, The message (String), or the props (Object) of the [Snackbar]( https://material-ui.com/api/snackbar )* \n```javascript\n  import { useModule } from \"react-hook-module\";\n  // must import material-UI plugin\n  import \"react-hook-module/plugin_mui\";\n  //...\n  // to show a snack bar\n  module.showSnackbar(\"snack message\");\n```\n#### `alert`\n ----\n\u003e **alert ( title, description, okCaption )**  \n\u003e \u0026emsp;\u0026emsp;*To show an material-UI alert window. It's an advanced function in material-UI plugin ( react-hook-module/plugin_mui ). You must use 'await' to call it, and it must be in an async function.*  \n\u003e **[parameters]**  \n\u003e * **title** [required] : *String, The title text* \n\u003e * **description** [required] : *String, The description text* \n\u003e * **okCaption** [optional] : *String, The caption text for OK button. Default is \"OK\".* \n```javascript\n  import { useModule } from \"react-hook-module\";\n  // must import material-UI plugin\n  import \"react-hook-module/plugin_mui\";\n  //...\n  (async()=\u003e{\n      // to show an alert dialog\n      await module.alert(\"title\", \"desc\", \"O K\");\n  })();\n```\n#### `confirm`\n ----\n\u003e **confirm ( title, description, okCaption, cancelCaption )**  \n\u003e \u0026emsp;\u0026emsp;*To show an material-UI confirm window. It's an advanced function in material-UI plugin ( react-hook-module/plugin_mui ). You must use 'await' to call it, and it must be in an async function.*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Boolean, the confirm result.*  \n\u003e **[parameters]**  \n\u003e * **title** [required] : *String, The title text* \n\u003e * **description** [required] : *String, The description text* \n\u003e * **okCaption** [optional] : *String, The caption text for OK button. Default is \"OK\".* \n\u003e * **cancelCaption** [optional] : *String, The caption text for cancel button. Default is \"Cancel\".* \n```javascript\n  import { useModule } from \"react-hook-module\";\n  // must import material-UI plugin\n  import \"react-hook-module/plugin_mui\";\n  //...\n  (async()=\u003e{\n      // to show an confirm dialog\n      const result = await module.cofirm(\"title\", \"desc\");\n  })();\n```\n#### `prompt`\n ----\n\u003e **prompt ( title, description, defaultValue, okCaption, cancelCaption )**  \n\u003e \u0026emsp;\u0026emsp;*To show an material-UI prompt window. It's an advanced function in material-UI plugin ( react-hook-module/plugin_mui ). You must use 'await' to call it, and it must be in an async function.*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*String, the input text.*  \n\u003e **[parameters]**  \n\u003e * **title** [required] : *String, The title text* \n\u003e * **description** [required] : *String, The description text* \n\u003e * **defaultValue** [optional] : *String, The default value text. Default is empty string.* \n\u003e * **okCaption** [optional] : *String, The caption text for OK button. Default is \"OK\".* \n\u003e * **cancelCaption** [optional] : *String, The caption text for cancel button). Default is \"Cancel\".* \n```javascript\n  import { useModule } from \"react-hook-module\";\n  // must import material-UI plugin\n  import \"react-hook-module/plugin_mui\";\n  //...\n  (async()=\u003e{\n      // to show an confirm dialog\n      const result = await module.prompt(\"title\", \"desc\");\n  })();\n```\n#### `showBackdrop`\n ----\n\u003e **showBackdrop ( id, clickAway, style, transitionDuration, children)**  \n\u003e \u0026emsp;\u0026emsp;*To show a backdrop for a given id. It's an advanced function in material-UI plugin ( react-hook-module/plugin_mui ).*  \n\u003e **[parameters]**  \n\u003e * **id** [optional] : *String, The backdrop id, default is 'default'* \n\u003e * **clickAway** [optional] : *Boolean, To determine whether 'click' to hide the backdrop or not, default is true.* \n\u003e * **style** [optional] : *Object, To determine the backdrop's style, default is {}.*   \n\u003e * **transitionDuration** [optional] : *Number, The transition duration in ms. Default is 300.* \n\u003e * **children** [optional] : *Array/Boolean, The children elements in the backdrop. Default is true \u003e there'll be an CircularProgress in the backdrop.* \n```javascript\n  import { useModule } from \"react-hook-module\";\n  // must import material-UI plugin\n  import \"react-hook-module/plugin_mui\";\n  //...\n  module.showBackdrop( );\n```\n#### `hideBackdrop`\n ----\n\u003e **hideBackdrop ( id )**  \n\u003e \u0026emsp;\u0026emsp;*To hide a backdrop for a given id. It's an advanced function in material-UI plugin ( react-hook-module/plugin_mui ).*  \n\u003e **[parameters]**  \n\u003e * **id** [optional] : *String, The backdrop id, default is 'default'.* \n```javascript\n  import { useModule } from \"react-hook-module\";\n  // must import material-UI plugin\n  import \"react-hook-module/plugin_mui\";\n  //...\n  module.hideBackdrop( );\n```\n### 2.5. useModule instance - request  plugin functions\n#### `request`\n ----\n\u003e **request ( url, data, method, baseURL, AUTH_TOKEN, header, config )**  \n\u003e \u0026emsp;\u0026emsp;*To request data from a remote service endpoint, by [axios](https://github.com/axios/axios). It's an advanced function in request  plugin ( react-hook-module/plugin_request ). You must use 'await' to call it, and it must be in an async function.*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, the request result.*  \n\u003e **[parameters]**  \n\u003e * **url** [required] : *String, The url option for an [axios reqeust](https://github.com/axios/axios#request-config)* \n\u003e * **data** [optional] : *Object/String, The data (ArrayBuffer, ArrayBufferView, URLSearchParams, FormData, File, Blob, or queryString) option for an  [axios reqeust](https://github.com/axios/axios#request-config) Default is null.* \n\u003e * **method** [optional] : *String, The method (get/post/put/delete/patch/head/options) option for an  [axios reqeust](https://github.com/axios/axios#request-config). Default is 'get'.*   \n\u003e * **baseURL** [optional] : *String, The base URL option for an  [axios reqeust](https://github.com/axios/axios#request-config). Default is empty string.*  \n\u003e * **AUTH_TOKEN** [optional] : *String, The AUTH_TOKEN option for an  [axios reqeust](https://github.com/axios/axios#request-config). Default is null.*  \n\u003e * **header** [optional] : *Object, The header option for an  [axios reqeust](https://github.com/axios/axios#request-config). Default is {}.*  \n\u003e * **config** [optional] : *Object, The config option for an  [axios reqeust](https://github.com/axios/axios#request-config).Default is {}.*  \n```javascript\n  import { useModule } from \"react-hook-module\";\n  // must import request plugin for \n  import \"react-hook-module/plugin_request\";\n  //...\n  const App = props =\u003e {\n      const { module } = useModule(props, { }); \n      return (\n        \u003cdiv\u003e\n          \u003cbutton onClick={async () =\u003e {\n            const result = await  module.request(useModule.resolveURL(\"./service/endpoint\"));\n            console.log( result );\n          }}\u003emodule.request\u003c/button\u003e\n        \u003c/div\u003e\n      );\n  };\n``` \n#### `request.fetch`\n ----\n\u003e **request.fetch(  )**  \n\u003e \u0026emsp;\u0026emsp;*To fetch data for the useModule's default request, only for the props with req_execute=false. You must use 'await' to call it, and it must be in an async function.*  \n\u003e  **[return]**  \n\u003e \u0026emsp;\u0026emsp;*Object, the request result.*  \n```javascript\n  import { useModule } from \"react-hook-module\";\n  import { If } from \"react-hook-module\";\n  // must import request plugin\n  import \"react-hook-module/plugin_request\";\n  //...\n  const App = props =\u003e {\n      // If no 'req_url', the request will be undefined \n      const { module, request } = useModule(props, {\n        props:{\n          req_url: useModule.resolveUrl(\"./service/endpoint\"),\n          req_execute: false\n        }\n      }); \n      return (\n        \u003cdiv\u003e\n          \u003cdiv\u003eStatus: [{request.status}]\u003c/div\u003e\n          \u003cIf condition={request.error} \u003e\n            error: {request.error \u0026\u0026 JSON.stringify(request.error)}\n          \u003c/If\u003e\n          \u003cIf condition={request.response} \u003e\n            data: {request.response \u0026\u0026 JSON.stringify(request.response)}\n          \u003c/If\u003e\n          \u003cbutton onClick={async () =\u003e {\n            const result = await request.fetch();\n            console.log( result );\n          }}\u003efetch\u003c/button\u003e\n        \u003c/div\u003e\n      );\n  };\n```\nNormally, you don't need to set 'req_execute' to false for the default request in an useModule. The default request will be executed automatically.\n```javascript\n  import { useModule } from \"react-hook-module\";\n  import { If } from \"react-hook-module\";\n  // must import request plugin\n  import \"react-hook-module/plugin_request\";\n  //...\n  const App = props =\u003e {\n      // If no 'req_url', the request will be undefined \n      const { module, request } = useModule(props, {\n        props:{\n          req_url: useModule.resolveUrl(\"./service/endpoint\")\n        }\n      }); \n      return (\n        \u003cdiv\u003e\n          \u003cdiv\u003eStatus: [{request.status}]\u003c/div\u003e\n          \u003cIf condition={request.error} \u003e\n            error: {request.error \u0026\u0026 JSON.stringify(request.error)}\n          \u003c/If\u003e\n          \u003cIf condition={request.response} \u003e\n            data: {request.response \u0026\u0026 JSON.stringify(request.response)}\n          \u003c/If\u003e\n        \u003c/div\u003e\n      );\n  };\n```\n#### `request.cancel`\n ----\n\u003e **request.cancel(  )**  \n\u003e \u0026emsp;\u0026emsp;*To cancel the useModule's default request.*  \n```javascript\n  import { useModule } from \"react-hook-module\";\n  // must import request plugin\n  import \"react-hook-module/plugin_request\";\n  //...\n  const App = props =\u003e {\n    // If no 'req_url', the request will be undefined \n    const { module, request } = useModule(props, {\n      props:{\n        req_url: useModule.resolveUrl(\"./service/endpoint\")\n      }\n    }); \n    // cancel the useModule's default request\n    React.useEffect(() =\u003e request.cancel(), [request]);\n      return (\n        \u003cdiv\u003e\n          \u003cdiv\u003eStatus: [{request.status}]\u003c/div\u003e\n        \u003c/div\u003e\n      );\n  };\n```\n### 2.6. useModule instance - router plugin functions\n#### `router.navigate`\n ----\n\u003e **router.navigate ( route, state )**  \n\u003e \u0026emsp;\u0026emsp;*To navigate to target route (document). *  \n\u003e **[parameters]**  \n\u003e * **route** [required] : *String, The route path.* \n\u003e * **state** [optional] : *Object, The state. [router.navigate('/', {replace: true})] equals to [router.replace('/')] .* \n#### `router.replace`\n ----\n\u003e **router.replace( route )**  \n\u003e \u0026emsp;\u0026emsp;*To replace the document by target route. *   \n\u003e **[parameters]**  \n\u003e * **route** [required] : *String, The route path.*   \n\n---\u003e`router.replace(route)` equlas to `router.navigate(route ,{replace: true})`.\n\n#### `router.setSearchParams`\n ----\n\u003e **router.setSearchParams( params )**  \n\u003e \u0026emsp;\u0026emsp;*[for useModule router plugin] To update the search parameters. *  \n\u003e **[parameters]**  \n\u003e * **params** [required] : *Object/String, The search params. Object or queryString.* \n```javascript\n  import { useModule } from \"react-hook-module\";\n  // must import request plugin\n  import { BrowserRouter as  Router, RelativeRouter } from  \"react-hook-module/plugin_router\";\n  //...\n  const App = props =\u003e {\n      // If no 'router' in props, or 'props.router' is false, the router will be undefined \n      const { module, router } = useModule(props, {\n        props:{\n          enableRouter : true\n        }\n      }); \n      return (\n        \u003cRouter\u003e\n\t        \u003cRelativeRouter\u003e\n\t\t\t\t\u003cdiv path=\"/path1\"\u003epath1\u003c/div\u003e\n\t\t\t\t\u003cdiv path=\"/path2\"\u003epath2\u003c/div\u003e\n\t\t\t\t\u003cdiv path=\"/about\"\u003eabout\u003c/div\u003e\n\t\t\t\t\u003cdiv path=\"*\"\u003eNot Support\u003c/div\u003e\n\t        \u003c/RelativeRouter\u003e\n\t        \u003cdiv\u003e\n\t\t\t\t\u003cbutton onClick={() =\u003e {\n\t\t\t\t\trouter.navigate('/about');\n\t\t\t\t}}\u003eRoute to \"/about\"\u003c/button\u003e\n\t\t\t\t\u003cbutton onClick={() =\u003e {\n\t\t\t\t\trouter.setSearchParams('k1=v1\u0026k2=v2');\n\t\t\t\t}}\u003esetSearchParams\u003c/button\u003e\t\t\t\t\n\t        \u003c/div\u003e\n        \u003c/Router\u003e\n      );\n  };\n```\n### 2.7. useModule instance - auth plugin functions\n#### `auth.signIn`\n ----\n\u003e **auth.signIn (  )**  \n\u003e \u0026emsp;\u0026emsp;*To trigger the sign in action.*    \n#### `auth.signOut `\n ----\n\u003e **auth.signOut (  )**  \n\u003e \u0026emsp;\u0026emsp;*To trigger the sign out action.*  \n#### `auth.signUp `\n ----\n\u003e **auth.signUp(  )**  \n\u003e \u0026emsp;\u0026emsp;*To trigger the sign up action.*     \n\n**File - auth_fake.js**\n```javascript\n  import {utils} from \"react-hook-module\";\n  // singIn function\n  const signIn = function(){\n    const auth = this;\n    const user = {email:\"fake@email.com\"};\n    setTimeout(() =\u003e {\n      auth.setUser(user);\n      utils.setCookie(\"user\", user);\n    }, 500);\n  };\n  // signOut function\n  const signOut = function(){\n    this.setUser(null);\n    utils.removeCookie(\"user\");\n  };\n  // signUp function\n  const signUp = function(){\n    console.log(\"signUp function\");\n  };  \n  const authInit = function(){\n    const auth = this;\n    const user = utils.getCookie(\"user\");\n    user \u0026\u0026 auth.setUser(user);\n    return function(){\n      // nothing\n    };\n  };\n  export default {signIn, signOut, authInit};\n```\n**File - index.js**\n```javascript\n  import React from \"react\";\n  import ReactDOM from \"react-dom\";\n  import { useModule } from \"react-hook-module\";\n  import { ProvideAuth } from \"react-hook-module/plugin_auth\";\n  import App from \"./App\";\n  import configure from \"./auth_fake.js\";\n  ReactDOM.render( (\n    \u003cReact.StrictMode\u003e\n      \u003cProvideAuth {...configure} \u003e\n        \u003cApp path=\"/*\" /\u003e\n      \u003c/ProvideAuth\u003e\n    \u003c/React.StrictMode\u003e\n  ), document.getElementById(\"root\"));\n```\n**File - App.js**\n```javascript\n  import React from \"react\";\n  import { useModule } from \"react-hook-module\";\n  import { If } from \"react-hook-module\";\n  const App = props =\u003e {\n      // If no 'auth' in props, or 'props.auth' is false, the auth will be undefined \n      const { module, auth } = useModule(props, { enableAuth: true });\n      return (\n      \u003cReact.Fragment\u003e\n        \u003cIf condition={auth \u0026\u0026 auth.user} \u003e\n          \u003cdiv\u003e Signed in successfully!\u003c/div\u003e\n          \u003cdiv\u003e User Email: {auth \u0026\u0026 auth.user \u0026\u0026 auth.user.email} \u003c/div\u003e\n          \u003cdiv\u003e \u003cbutton onClick={() =\u003e auth.signOut()}\u003eSign Out\u003c/button\u003e \u003c/div\u003e\n        \u003c/If\u003e\n        \u003cIf condition={!auth || !auth.user} \u003e\n          \u003cdiv\u003e\u003cbutton onClick={() =\u003e auth.signIn()}\u003eSign In\u003c/button\u003e\u003c/div\u003e\n        \u003c/If\u003e\n      \u003c/React.Fragment\u003e\n    );\n  };\n```\n## 3. Quickstart\n### 3.1. Basic Demo\n```javascript\nimport React from \"react\";\nimport { useModule } from \"react-hook-module\";\n\nexport default (props) =\u003e {\n  const { module } = useModule(props, {\n    actions: {\n      callback: (msg) =\u003e module.updateState({ msg })\n    }\n  });\n  return (\n    \u003cdiv style={{ border: \"1px dashed\", padding: \"1em\" }}\u003e\n      \u003ch2\u003euseModule demo {\"\u003e\"} modules interaction\u003c/h2\u003e\n      \u003cdiv\u003e\n        \u003cstrong\u003e\n          {\"\u003c\"}Module1{\"\u003e\"}\n        \u003c/strong\u003e\n      \u003c/div\u003e{\" \"}\n      \u003cp /\u003e\n      \u003cbutton\n        onClick={(e) =\u003e\n          module.updateStateFor(\"alias_in_parent\", {\n            value: \"Value updated by updateState\"\n          })\n        }\n      \u003e\n        updateState for Module2\n      \u003c/button\u003e\n      {\" | \"}\n      \u003cbutton\n        onClick={(e) =\u003e\n          module.sendMessageTo(\n            \"alias_in_parent\",\n            \"Value updated by sendMessage\"\n          )\n        }\n      \u003e\n        sendMessage to Module2\n      \u003c/button\u003e\n      {\" | \"}\n      \u003cbutton\n        onClick={(e) =\u003e\n          useModule.dispatchActionTo(\"global_uid\", \"updValue\", [\n            \"Value updated by dispatchAction\"\n          ])\n        }\n      \u003e\n        dispatchAction to Module2\n      \u003c/button\u003e\n      \u003cp /\u003e\n      \u003cdiv\u003e Callback Message: \"{module.state.msg || \"No callback yet\"}\"\u003c/div\u003e\n      \u003cp /\u003e\n      \u003cModule2 usemodule_alias=\"alias_in_parent\" usemodule_parent={module} /\u003e\n      \u003cModule2 usemodule_uid=\"global_uid\" /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport const Module2 = (props) =\u003e {\n  const { module } = useModule(props, {\n    props: {\n      onMessage: (value) =\u003e {\n        module.updateState({ value });\n        module.parent.dispatchAction(\"callback\", [\"Message received\"]);\n      }\n    },\n    actions: {\n      updValue: (value) =\u003e {\n        module.updateState({ value });\n      }\n    }\n  });\n  return (\n    \u003cdiv style={{ border: \"1px dashed\", padding: \"1em\" }}\u003e\n      \u003cdiv\u003e\n        \u003cstrong\u003e\n          {\"\u003c\"}Module2{\"\u003e\"}\n        \u003c/strong\u003e{\" \"}\n        ( {props.usemodule_alias ? \"alias='\" + props.usemodule_alias + \"'\" : \"\"}{\" \"}\n        {props.usemodule_uid ? \"uid='\" + props.usemodule_uid + \"'\" : \"\"} )\n      \u003c/div\u003e{\" \"}\n      \u003cp /\u003e\n      value = \"\u003cstrong\u003e{module.state.value}\u003c/strong\u003e\"\n    \u003c/div\u003e\n  );\n};\n```\n#### Screenshot\n\u003cimg src=\"https://raw.githubusercontent.com/linb/react-hook-module/master/image/demo1.png\"  width=\"600\"\u003e\n\n#### Module Tree\n```\n[root]\n  │  \n  ├─\u003cModule1\u003e\n  │     │  \n  │     └\u003cModule2 usemodule_alias=\"alias_in_parent\"\u003e\n  │      \n  └\u003cModule2 usemodule_uid=\"global_uid\"\u003e\n ```\n[Open the demo in CodeSandbox](https://codesandbox.io/s/thirsty-swirles-4iomy \"react-hook-module basic demo\")\n\n\n### 3.2. Meterial UI Demo\n```javascript\nimport React from \"react\";\nimport { useModule } from \"react-hook-module\";\nimport \"react-hook-module/plugin_mui\";\nimport { Button } from \"@material-ui/core\";\nimport { makeStyles } from \"@material-ui/core\";\nimport { Dialog } from \"@material-ui/core\";\nimport { TextField } from \"@material-ui/core\";\nimport { DialogActions } from \"@material-ui/core\";\nimport { DialogContent } from \"@material-ui/core\";\nimport { DialogContentText } from \"@material-ui/core\";\nimport { DialogTitle } from \"@material-ui/core\";\n\nconst useStyles4basic = makeStyles((theme) =\u003e ({\n  item: { margin: theme.spacing(1) },\n  container: { padding: theme.spacing(1) }\n}));\n\nconst Module_Dialog = (props) =\u003e {\n  const styles_basic = useStyles4basic(props || {});\n  const { module } = useModule(props, {});\n  return (\n    \u003cReact.Fragment\u003e\n      \u003cdiv\u003e\n        \u003cButton\n          variant=\"contained\"\n          color=\"primary\"\n          className={styles_basic.item}\n          onClick={async (e) =\u003e {\n            await module.alert(\"Alert 1\");\n          }}\n        \u003e\n          Alert 1\n        \u003c/Button\u003e\n        \u003cButton\n          variant=\"contained\"\n          color=\"secondary\"\n          className={styles_basic.item}\n          onClick={async (e) =\u003e {\n            const rst = await module.confirm(\"Confirm 1\");\n            alert(rst);\n          }}\n        \u003e\n          Confirm 1\n        \u003c/Button\u003e\n        \u003cButton\n          variant=\"contained\"\n          color=\"default\"\n          className={styles_basic.item}\n          onClick={async (e) =\u003e {\n            const rst = await module.prompt(\"Prompt 1\");\n            alert(rst);\n          }}\n        \u003e\n          Prompt 1\n        \u003c/Button\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cButton\n          variant=\"contained\"\n          color=\"primary\"\n          className={styles_basic.item}\n          key=\"cyenksua\"\n          onClick={(e) =\u003e {\n            useModule.updateStateFor(\"Alert_1\", { open: true });\n          }}\n        \u003e\n          Alert 2\n        \u003c/Button\u003e\n        \u003cButton\n          variant=\"contained\"\n          color=\"secondary\"\n          className={styles_basic.item}\n          onClick={(e) =\u003e {\n            useModule.dispatchActionTo(\"Confirm_1\", \"open\");\n          }}\n        \u003e\n          Confirm 2\n        \u003c/Button\u003e\n        \u003cButton\n          variant=\"contained\"\n          color=\"default\"\n          className={styles_basic.item}\n          onClick={(e) =\u003e {\n            useModule.sendMessageTo(\"Prompt_1\", \"open\");\n          }}\n        \u003e\n          Prompt 2\n        \u003c/Button\u003e\n      \u003c/div\u003e\n\n      \u003cAlert\n        open={false}\n        usemodule_alias=\"Alert_1\"\n        usemodule_parent=\"{module}\"\n        title=\"Alert 2\"\n        description=\"Description\"\n        onOK={() =\u003e alert(\"OK\")}\n      \u003e\u003c/Alert\u003e\n      \u003cConfirm\n        open={false}\n        usemodule_alias=\"Confirm_1\"\n        usemodule_parent=\"{module}\"\n        title=\"Confirm 2\"\n        description=\"Description\"\n        onOK={() =\u003e alert(\"OK\")}\n        onCancel={() =\u003e alert(\"onCancel\")}\n      \u003e\u003c/Confirm\u003e\n      \u003cPrompt\n        open={false}\n        usemodule_alias=\"Prompt_1\"\n        usemodule_parent=\"{module}\"\n        title=\"Prompt 2\"\n        description=\"Description\"\n        onOK={(txt) =\u003e alert(\"Result: \" + txt)}\n        onCancel={() =\u003e {\n          alert(\"onCancel\");\n        }}\n      \u003e\u003c/Prompt\u003e\n    \u003c/React.Fragment\u003e\n  );\n};\n\nexport default Module_Dialog;\n\nexport const Alert = (props) =\u003e {\n  const { module } = useModule(props, {\n    props: {\n      open: true,\n      title: \"Title\",\n      description: \"Description\",\n      onOK: () =\u003e {}\n    },\n    state: {\n      open: false\n    },\n    actions: {\n      open: function () {\n        this.updateState({ open: true });\n      },\n      close: function () {\n        this.updateState({ open: false });\n      }\n    }\n  });\n  const [defaultState, setDefaultState] = React.useState({\n    open: false\n  });\n\n  return (\n    \u003cDialog\n      open={\n        (module.props \u0026\u0026 module.props.open) ||\n        (module.state \u0026\u0026 module.state.open)\n      }\n      onClose={() =\u003e module.dispatchAction(\"close\")}\n      fullWidth\n      aria-labelledby=\"alert_9za5tayt_title\"\n      aria-describedby=\"alert_9za5tayt_description\"\n      key=\"7e8gz5b3\"\n    \u003e\n      \u003cDialogTitle id=\"alert_9za5tayt_title\"\u003e\n        {\" \"}\n        {module.props \u0026\u0026 module.props.title}{\" \"}\n      \u003c/DialogTitle\u003e\n      \u003cDialogContent\u003e\n        \u003cDialogContentText id=\"alert_9za5tayt_description\"\u003e\n          {module.props \u0026\u0026 module.props.description}\n        \u003c/DialogContentText\u003e\n      \u003c/DialogContent\u003e\n      \u003cDialogActions\u003e\n        \u003cButton\n          onClick={() =\u003e {\n            module.props.onOK();\n            module.dispatchAction(\"close\");\n          }}\n          color=\"primary\"\n        \u003e\n          {\" \"}\n          OK{\" \"}\n        \u003c/Button\u003e\n      \u003c/DialogActions\u003e\n    \u003c/Dialog\u003e\n  );\n};\n\nexport const Confirm = (props) =\u003e {\n  const { module } = useModule(props, {\n    props: {\n      open: true,\n      title: \"Title\",\n      description: \"Description\",\n      onOK: () =\u003e {},\n      onCancel: () =\u003e {}\n    },\n    state: {\n      open: false\n    },\n    actions: {\n      open: function () {\n        this.updateState({ open: true });\n      },\n      close: function () {\n        this.updateState({ open: false });\n      }\n    }\n  });\n  const [defaultState, setDefaultState] = React.useState({\n    open: false\n  });\n\n  return (\n    \u003cDialog\n      open={\n        (module.props \u0026\u0026 module.props.open) ||\n        (module.state \u0026\u0026 module.state.open)\n      }\n      onClose={() =\u003e module.dispatchAction(\"close\")}\n      fullWidth\n      aria-labelledby=\"confirm_jlh80pil_title\"\n      aria-describedby=\"confirm_jlh80pil_description\"\n      key=\"2h6e3jqi\"\n    \u003e\n      \u003cDialogTitle id=\"confirm_jlh80pil_title\"\u003e{props.title}\u003c/DialogTitle\u003e\n      \u003cDialogContent\u003e\n        \u003cDialogContentText id=\"confirm_jlh80pil_description\"\u003e\n          {props.description}\n        \u003c/DialogContentText\u003e\n      \u003c/DialogContent\u003e\n      \u003cDialogActions\u003e\n        \u003cButton\n          onClick={() =\u003e {\n            module.props.onCancel();\n            module.dispatchAction(\"close\");\n          }}\n          color=\"secondary\"\n        \u003e\n          Cancel\n        \u003c/Button\u003e\n        \u003cButton\n          onClick={() =\u003e {\n            module.props.onOK();\n            module.dispatchAction(\"close\");\n          }}\n          color=\"primary\"\n        \u003e\n          OK\n        \u003c/Button\u003e\n      \u003c/DialogActions\u003e\n    \u003c/Dialog\u003e\n  );\n};\n\nexport const Prompt = (props) =\u003e {\n  const { module } = useModule(props, {\n    props: {\n      open: true,\n      title: \"Title\",\n      description: \"Description\",\n      onOK: () =\u003e {},\n      onCancel: () =\u003e alert(9),\n      onMessage: (msg) =\u003e {\n        if (msg === \"open\") {\n          module.updateState({\n            open: true\n          });\n        }\n      }\n    },\n    state: {\n      open: false\n    },\n    actions: {\n      open: function () {\n        this.updateState({\n          open: true\n        });\n      },\n      close: function () {\n        this.updateState({\n          open: false\n        });\n      }\n    }\n  });\n  const [defaultState, setDefaultState] = React.useState({\n    open: false\n  });\n\n  return (\n    \u003cDialog\n      open={\n        (module.props \u0026\u0026 module.props.open) ||\n        (module.state \u0026\u0026 module.state.open)\n      }\n      onClose={() =\u003e module.dispatchAction(\"close\")}\n      fullWidth\n      aria-labelledby=\"prompt_fn69vqpc_title\"\n      aria-describedby=\"prompt_fn69vqpc_description\"\n      key=\"blg87o2c\"\n    \u003e\n      \u003cDialogTitle id=\"prompt_fn69vqpc_title\"\u003e{props.title}\u003c/DialogTitle\u003e\n      \u003cDialogContent\u003e\n        \u003cDialogContentText id=\"prompt_fn69vqpc_description\"\u003e\n          {props.description}\n        \u003c/DialogContentText\u003e\n        \u003cTextField\n          autoFocus\n          margin=\"dense\"\n          defaultValue=\"\"\n          fullWidth\n          onChange={(e) =\u003e\n            setDefaultState(\n              Object.assign({}, defaultState, { text: e.target.value })\n            )\n          }\n        \u003e\u003c/TextField\u003e\n      \u003c/DialogContent\u003e\n      \u003cDialogActions\u003e\n        \u003cButton color=\"secondary\" onClick={() =\u003e props.onCancel()}\u003e\n          Cancel\n        \u003c/Button\u003e\n        \u003cButton\n          onClick={() =\u003e {\n            props.onOK(defaultState.text);\n            module.dispatchAction(\"close\");\n          }}\n          color=\"primary\"\n        \u003e\n          OK\n        \u003c/Button\u003e\n      \u003c/DialogActions\u003e\n    \u003c/Dialog\u003e\n  );\n};\n\n```\n#### Screenshot\n\u003cimg src=\"https://raw.githubusercontent.com/linb/react-hook-module/master/image/demo2.png\"  width=\"600\"\u003e\n\n#### Module Tree\n```\n[root]\n  │  \n  └─\u003cModule_Dialog \u003e\n         │  \n         ├\u003cAlert usemodule_alias=\"Alert_1\"\u003e\n         │  \n         ├\u003cConfirm usemodule_alias=\"Confirm_1\"\u003e\n         │  \n         └\u003cPrompt usemodule_uid=\"Prompt_uid\"\u003e\n```\n\n[Open the demo in CodeSandbox](https://codesandbox.io/s/strange-thompson-g4op5 \"react-hook-module Materail-UI demo\")\n\n## React Builder\n[React Builder](https://crossui.com/ReactBuilder \"react-builder online\")\n\u003cimg src=\"https://crossui.com/img/React-Builder-1.png\"\u003e\n\n## npm\n[npm link](https://www.npmjs.com/package/react-hook-module \"react-hook-module NPM\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinb%2Freact-hook-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinb%2Freact-hook-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinb%2Freact-hook-module/lists"}