npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-hook-module

v0.3.5

Published

A react module hook for real configurable app with stateful persistent module tree and peer-to-peer messaging mechanism

Downloads

37

Readme

react-hook-module - version 0.3

A react module hook for real configurable app with stateful persistent module tree and peer-to-peer messaging mechanism

1. Usage

1.1. Install

npm install react-hook-module

1.2. Import

import { useModule } from "react-hook-module";

1.3. Call it in a render function

...
const ReactComponent = props => {
  const { module, auth, router, request } = useModule(props, {
    // the default state for this module
    state:{},
    // the default props for this module
    props:{
        // enable HotKeys
        enableHotKeys: true,
        // enable router
        enableRouter: true,
        // enable auth
        enableAuth: true,
        // the request configure
        enableRequest: true,
        req_url : `${useModule.resolveURL( "data/demo.json" ) }`,
        req_data : { key : "value" },
        req_method : "post",
        req_baseURL : null,
        req_AUTH_TOKEN : null,
        req_header : null,
        req_config : null,
        req_execute : true
    },
    // actions for this module
    actions:{"actionName":()=>()},
    // for extra data
    tagVar:{}    
  }); 

  // ...
  // return JSX;
};

1.4. Use the component

...
const ReactComSub1 = props => {
  const { module } = useModule(props, { }); 
  return (
    <div>
      ReactComSub1
    </div>
  );
};
const ReactComSub2 = props => {
  const { module } = useModule(props, { }); 
  return (
    <div>
      ReactComSub2 - {props.name}
    </div>
  );
};
const ReactCom = props => {
  const { module } = useModule(props, {
    state:{
      items:[{"name":"v1"},{"name":"v2"}]
    }
  }); 
  const XReactComSub2 = module.enhanceCom(ReactComSub2);
  return (
    <div>
      <ReactComSub1 usemodule_alias="alias1" usemodule_uid="uid1" usemodule_parent={module}/>
      <ReactComSub2 usemodule_alias="alias2" usemodule_uid="uid2" usemodule_parent={module}/>
      <XReactComSub2 usemodule_alias="alias3" usemodule_uid="uid3" x_id="x_id1" x_iterator={module.state.items}/>
    </div>
  );
};
[root]
  │  
  └─<ReactCom >
         │  
         ├<ReactComSub1 usemodule_alias="alias1">
         │  
         ├<ReactComSub2 usemodule_alias="alias2">
         │  
         └<XReactComSub2 usemodule_uid="alias3" x_id="x_id1">

2. API

2.1. useModule static functions

useModule.getRootModule


useModule.getRootModule( )
  Gets the root useModule element.
[return]
  Object, The root useModule element.

  // to get the root useModule element
  const rootModule = useModule.getRootModule();

useModule.getModule


useModule.getModule ( idOrAlias )
  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 )
[return]
  Object, The result useModule element
[parameters]

  • idOrAlias [required] : String, The target useModule element's uid or alias
  // to get an useModule element with usemodule_uid="global_uid1"
  const module1 = useModule.getModule("global_uid1");
  // to get an useModule element (It's a child element in the root useModule element) with usemodule_alias="alias1"
  const module2 = useModule.getModule("alias1");
  // to get an useModule element with alias path: ["alias_in_root", "alias_in_level1", "alias_in_level2"]
  const module3 = useModule.getModule("alias_in_root.alias_in_level1.alias_in_level2");  

useModule.sendMessageTo


useModule.sendMessageTo ( receiver, message )
  Sends a message to the target useModule element, which can be received in it's onMessage event
[return]
  Object, The return value of target useModule element's onMessage event
[parameters]

  • 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 ).
  • message [required] : Object / Any, The message, can be any value
  // to sent a message to module1
  const result1 = useModule.sendMessageTo(module1, "message");
  // to sent a message to an useModule element with usemodule_uid="global_uid1"
  const resul2 = useModule.sendMessageTo("global_uid1", "message");
  // to sent a message to an useModule element ( a child element in the root useModule element) with usemodule_alias="alias1"
  const resul3 = useModule.sendMessageTo("alias1", "message");
  // to sent a message to an useModule element with alias path: ["alias_in_root", "alias_in_level1", "alias_in_level2"]
  const resul4 = useModule.sendMessageTo("alias_in_root.alias_in_level1.alias_in_level2", "message");  

useModule.dispatchActionTo


useModule.dispatchActionTo ( receiver, actionName, params, from)
  Dispatches an action of the target useModule element
[return]
  Object, The target action's return value
[parameters]

  • 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 ).
  • actionName [required] : String, The action name to be dispatched
  • params [optional] : Array, The parameters for the given action
  • from [optional] : Object/Any, The from info that indicates who dispatch the action or can be other info
  // to dispatch an action of module1
  const result1 = useModule.dispatchActionTo(module1, "actionName", [/*parameters*/]);
  // to dispatch an action of an useModule element with usemodule_uid="global_uid1"
  const resul2 = useModule.dispatchActionTo("global_uid1", "actionName", [/*parameters*/]);
  // to dispatch an action of an useModule element (a child element in the root useModule element) with usemodule_alias="alias1"
  const resul3 = useModule.dispatchActionTo("alias1", "actionName", [/*parameters*/]);
  // to dispatch an action of an useModule element with alias path: ["alias_in_root", "alias_in_level1", "alias_in_level2"]
  const resul4 = useModule.dispatchActionTo("alias_in_root.alias_in_level1.alias_in_level2", "actionName", [/*parameters*/]);

useModule.dispatchAsyncActionTo


useModule.dispatchAsyncActionTo ( receiver, actionName, params, from)
  Dispatches an asynchronous action of the target useModule element
[return]
  Object, The target action's return value
[parameters]

  • 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 ).
  • actionName [required] : String, The asynchronous action name to be dispatched
  • params [optional] : Array, The parameters for the given action
  • from [optional] : Object/Any, The from info that indicates who dispatch the action or can be other info
  // to dispatch an action of module1, 
  const result1 = useModule.dispatchAsyncActionTo(module1, "asyncActionName", [/*parameters*/]);
  // to dispatch an action of an useModule element with usemodule_uid="global_uid1"
  const resul2 = useModule.dispatchAsyncActionTo("global_uid1", "asyncActionName", [/*parameters*/]);
  // to dispatch an action of an useModule element (a child elemnt in the root useModule element) with usemodule_alias="alias1"
  const resul3 = useModule.dispatchAsyncActionTo("alias1", "asyncActionName", [/*parameters*/]);
  // to dispatch an action of an useModule element with alias path: ["alias_in_root", "alias_in_level1", "alias_in_level2"]
  const resul4 = useModule.dispatchAsyncActionTo("alias_in_root.alias_in_level1.alias_in_level2", "asyncActionName", [/*parameters*/]);

useModule.updateStateFor


useModule.updateStateFor ( target, path, state, force )
  Updates the module state for the target useModule element
[parameters]

  • 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 ).
  • path [required] : Object / Array< String > / String, If it's an Array< String >: to specify the path for updating the state; If it's a String: the string can be convert into an Array< String > 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.
  • state [optional] : Object, The object to update the state in the given path
  • force [optional] : Boolean, Indicates whether force to update the state. Default is false.
  // to update state for module1
  useModule.updateStateFor(module1, { key:"value" });
  // to update state for an useModule element with usemodule_uid="global_uid1"
  useModule.updateStateFor("global_uid1", "key", "value");
  // to update state for an useModule element (a child element in the root useModule element) with usemodule_alias="alias1"
  useModule.updateStateFor("alias1", "keylevel1.keylevel2.keylevel3", "value");
  // to update state for an useModule element with alias path: ["alias_in_root", "alias_in_level1", "alias_in_level2"]
  useModule.updateStateFor("alias_in_root.alias_in_level1.alias_in_level2", "key", "value");

useModule.fireEventTo


useModule.fireEventTo ( target, eventName, params, from)
  Fires an event of the target useModule element
[return]
  Object, The return value of the target event
[parameters]

  • 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 ).
  • eventName [required] : String, The event name
  • params [optional] : Array, The parameters for the given event
  • from [optional] : Object/Any, The from info that indicates who fire the event or can be other info
  // to fire an event for module1
  const result1 = useModule.fireEventFor(module1, "eventName", [/*parameters*/]);
  // to fire an event for an useModule element with usemodule_uid="global_uid1"
  const resul2 = useModule.fireEventFor("global_uid1", "eventName", [/*parameters*/]);
  // to fire an event for an useModule element (a child element in the root useModule element) with usemodule_alias="alias1"
  const resul3 = useModule.fireEventFor("alias1", "eventName", [/*parameters*/]);
  // to fire an evnt for an useModule element with alias path: ["alias_in_root", "alias_in_level1", "alias_in_level2"]
  const resul4 = useModule.fireEventFor("alias_in_root.alias_in_level1.alias_in_level2", "eventName", [/*parameters*/]);

useModule.broadcast


useModule.broadcast ( channelName, message)
  Broadcasts message to all useModule elements via a specified channel, which can be received in all useModule elements' onChannelMessage event
[parameters]

  • channelName [required] : String, The channel name
  • message [required] : Object / Any, The message object, can be any value
  // to broadcast an message to all useModule elements
  useModule.broadcast("channelName","message");

useModule.printModulesTree


useModule.printModulesTree ( )
  Prints the useModule element tree to the console window

  // to print the whole useModule element tree onto the console
  useModule.printModulesTree( );

useModule.resolveURL


useModule.resolveURL ( relPath )
  Resolves an url from a relative path. If you want to use a relative resource path in the CrossUI Designer, it's a must
[return]
  String, The resolved url
[parameters]

  • relPath [required] : String, The relative path for an url
  // to resolve a relative path for the resource url
  useModule.resolveURL("./img/pic.png");

useModule.getDataFromStore


useModule.getDataFromStore ( path )
  Gets data from the global store by the path
[return]
  Object, The result data
[parameters]

  • path [required] : Array< String > / String, If it's an Array< String >: to specify the path for the data; If it's a String: the string can be convert into an Array< String > after splitting by '.'

useModule.setDataToStore


useModule.setDataToStore ( path, value, clonePath )
  Sets data to the global store by the path
[parameters]

  • path [required] : Array< String > / String, If it's an Array< String >: to specify the path for the data; If it's a String: the string can be convert into an Array< String > after splitting by '.'
  • value [required] : Object / Any, The object to set
  • clonePath [optional] : Boolean, Determines whether to clone the path or not. Default is false.
  // to get data from the global store
  useModule.setDataToStore("path_level1.path_level2", {data:"value"}, false);
  // reusult: "value"
  useModule.getDataFromStore("path_level1.path_level2.data");

2.2. useModule utils functions

useModule.utils.getRand


useModule.utils.getRand ( preTag )
  Gets a random string. The result like 'ca1gis'.
[return]
  String, The random string.
[parameters]

  • preTag [optional] : String, The previous tag for the random string. Default is empty string.
  // The result like 'ca1gis
  useModule.getRand();
  // The result like 'id_ca1gis'
  useModule.getRand("id_");

useModule.utils.getNo


useModule.utils.getNo ( preTag )
  Gets a No. string. The result like 'a'.
[return]
  String, The No. string.
[parameters]

  • preTag [optional] : String, The previous tag for the No. string. Default is empty string.
  // The result like 'a'
  useModule.utils.getNo();
  // The result like 'id_a'
  useModule.utils.getNo("id_");

useModule.utils.deepGet


useModule.utils.deepGet ( object, path )
  Gets data from the given object by the path.
[return]
  Object/Any, The result data.
[parameters]

  • object [required] : Object, The target object.
  • path [required] : Array< String > / String, The path. If it's an Array< String >: to specify the path for the data; If it's a String: the string can be convert into an Array< String > after splitting by '.'
  // return 1
  useModule.utils.deepGet({a:{b:{c:1}}},'a.b.c');
  // return 1
  useModule.utils.deepGet({a:{b:{c:1}}},["a","b","c"]);

useModule.utils.deepSet


useModule.utils.deepSet ( object, path )
  Sets data to the given object by the path.
[return]
  Object/Any, The target object.
[parameters]

  • object [required] : Object, The target object.
  • path [required] : Array< String > / String, The path. If it's an Array< String >: to specify the path for the data; If it's a String: the string can be convert into an Array< String > after splitting by '.'
  • value [required] : Object/Any, The value to set.
  • clonePath [optional] : Boolean, Determines whether to clone the path or not. Default is false.
  // result : {a:{b:{c:2}}}
  useModule.utils.deepSet({a:{b:{c:1}}},'a.b.c', 2);
  // result : {a:{b:{c:[1,2,3]}}}
  useModule.utils.deepSet({a:{b:{c:1}}},["a","b","c"], [1,2,3]);

useModule.utils.deepClone


useModule.utils.deepClone ( object )
  Clones the given object deeply.
[return]
  Object/Any, The cloned object.
[parameters]

  • object [required] : Object, The target object to be cloned.
  const source = {a:{b:{c:1}}};
  // cloned : {a:{b:{c:1}}}
  // cloned.a === source.a      > false
  // cloned.a.b === source.a.b  > false
  const cloned = useModule.utils.deepClone(source);

useModule.utils.toUTF8


useModule.utils.toUTF8 ( source )
  Converts a string to UTF-8 string.
[return]
  String, The result UTF-8 string .
[parameters]

  • utf8string [required] : String, The target string to be converted.

useModule.utils.fromUTF8


useModule.utils.fromUTF8 ( utf8string )
  Converts an UTF-8 string back.
[return]
  String, The result string .
[parameters]

  • utf8string [required] : String, The target UTF-8 string to be converted.
  const source = '漢字';
  // "\u6f22\u5b57"
  const utf8 = useModule.utils.toUTF8(source);
  // source === back
  const back = useModule.utils.fromUTF8(utf8 );
  console.log(utf8, back);

useModule.utils.makeURLQueryString


useModule.utils.makeURLQueryString ( hash )
  Converts an object into an url query string.
[return]
  String, The result query string.
[parameters]

  • hash [required] : Object, The target object to be converted.

useModule.utils.getURLParams


useModule.utils.getURLParams ( querystring )
  Converts an object into an url query string.
[return]
  String, The result query string.
[parameters]

  • querystring [required] : Object, The target querystring.
  • parameter [optional] : String, The parameter key string. If don't specify this, it will return an object that presents all parameters.
  const hash = {k1:"v1",k2:"v2"};
  // return "k1=v1&k2=v2"
  const qs= useModule.utils.makeURLQueryString(hash);
  // return {k1:"v1",k2:"v2"}
  const back = useModule.utils.getURLParams(utf8 );
  // return "v2"
  const value = useModule.utils.getURLParams(utf8, "k2" );
  console.log(qs, back, value );

useModule.utils.getCookie


useModule.utils.getCookie ( name )
  Gets a specified cookie with the given name.
[return]
  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.
[parameters]

  • name [required] : String, The cookie name.

useModule.utils.setCookie


useModule.utils.setCookie ( name, value, options )
  Creates a cookie with the given name, value, and options.
[parameters]

  • name [required] : String, The cookie name.
  • value [required] : String/Object/Array, The value of cookie. If it's an Object or Array, a stringified string will be saved into Cookie.
  • options [options] : Object, The cookie options. { expires: Number for seconds, path: String, domain: String, maxAge: String, sameSite: Boolean, secure: Boolean, httpOnly: Boolean }.

useModule.utils.removeCookie


useModule.utils.removeCookie ( name )
  Removes a specified cookie by the given name.
[parameters]

  • name [required] : String, The cookie name.

useModule.utils.clearCookie


useModule.utils.clearCookie ( )
  Clears all cookies.

  useModule.utils.setCookie("c1", "v1");
  useModule.utils.setCookie("c2", {k1:"v1",k2:"v2"});
  // return "v1"
  const cookie1 = useModule.utils.getCookie( "c1" );
  // return {k1:"v1",k2:"v2"}
  const cookie2 = useModule.utils.getCookie( "c2" );
  console.log( cookie1, cookie2 );
  useModule.utils.removeCookie( "c1" );
  useModule.utils.clearCookie( );

useModule.utils.getLocalStorage


useModule.utils.getLocalStorage ( name )
  Gets a specified local storage by the given name.
[return]
  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.
[parameters]

  • name [required] : String, The local storage name.

useModule.utils.setLocalStorage


useModule.utils.setLocalStorage ( name, value )
  Creates a local storage data with the given name and value.
[parameters]

  • name [required] : String, The local storage name.
  • 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.

useModule.utils.removeLocalStorage


useModule.utils.removeLocalStorage ( name )
  Removes a specified local storage by the given name.
[parameters]

  • name [required] : String, The local storage name.

useModule.utils.clearLocalStorage


useModule.utils.clearLocalStorage ( )
  Clears all local storage.

  useModule.utils.setLocalStorage ("c1", "v1");
  useModule.utils.setLocalStorage ("c2", {k1:"v1",k2:"v2"});
  // return "v1"
  const sto1 = useModule.utils.getLocalStorage( "c1" );
  // return {k1:"v1",k2:"v2"}
  const sto2 = useModule.utils.getLocalStorage( "c2" );
  console.log( sto1, sto2 );
  useModule.utils.removeLocalStorage( "c1" );
  useModule.utils.clearLocalStorage( );

useModule.utils.postH5ChannelMessage


useModule.utils.postH5ChannelMessage ( channelName, message)
  Posts HTML5 message ( ref: window.BroadcastChannel ) to all browser windows via a specified channel, which can be received in all useModule components' onH5ChannelMessage event
[parameters]

  • channelName [required] : String, The channel name
  • message [required] : Object / Any, The message object, can be any value
  // to pose HTML5 message to all browser windows via "channel1"
  useModule.utils.postH5ChannelMessage ("channel1","message");

useModule.utils.selectLocalFiles


useModule.utils.selectLocalFiles ( contentType, multiple )
  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.
[return]
  Array < File >, The result files.
[parameters]

  • contentType [optional] : String, The content type. e.g. 'image/png', 'image/*'
  • multiple [optional] : Boolean, Allows multiple files or not. Default is false
  import { useModule } from "react-hook-module";
  //...
  const App = props => {
      const { module } = useModule(props, { }); 
      return (
        <div>
          <button onClick={async () => {
            const files = await useModule.utils.selectLocalFiles("image/*", true);
            console.log(files);
          }}>module.request</button>
        </div>
      );
  };

2.3. useModule instance - module functions

getRootModule


getRootModule ( )
  Gets the root useModule element
[return]
  Object, The root useModule element

  // to get the root useModule element
  const rootModule = module.getRootModule();

getModule


getModule ( idOrAlias )
  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 )
[return]
  Object, The result module element
[parameters]

  • idOrAlias [required] : String, The target useModule element's uid or alias
  // to get an useModule element with usemodule_uid="global_uid1"
  const module1 = module.getModule("global_uid1");
  // to get an useModule element( a child element in the current module) with usemodule_alias="alias1"
  const module2 = module.getModule("alias1");
  // to get an useModule element with alias path: ["alias_in_root", "alias_in_level1", "alias_in_level2"]
  const module3 = module.getModule("alias_in_root.alias_in_level1.alias_in_level2");  

getModuleByAlias


getModuleByAlias ( alias )
  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)
[return]
  Object, The result module element
[parameters]

  • alias [required] : String, The alias of the element
  // to get a child module in the current module with usemodule_alias="alias1"
  const childModule = module.getModuleByAlias("alias1");

sendMessage


sendMessage ( message )
  Sends a message to the current useModule, which can be received in it's onMessage event
[return]
  Object, The return value of the module's onMessage event
[parameters]

  • message [required] : Object / Any, The message object, can be any value
  // to sent a message
  const result1 = module.sendMessage("message");  

dispatchAction


dispatchAction ( actionName, params, from )
  Dispatches an action for the current useModule element
[return]
  Object, The target action's return value
[parameters]

  • actionName [required] : String, The action name to be dispatched
  • params [optional] : Array, The parameters for the given action
  • from [optional] : Object/Any, The from info that indicates who dispatch the action or can be other info
  // to dispatch an action
  const result1 = module.dispatchAction("actionName", [/*parameters*/]);

dispatchAsyncAction


dispatchAsyncAction ( actionName, params, from)
  Dispatches an asynchronous action for the current useModule element
[return]
  Object, The target action's return value
[parameters]

  • actionName [required] : String, The asynchronous action name to be dispatched
  • params [optional] : Array, The parameters for the given action
  • from [optional] : Object/Any, The from info that indicates who dispatch the action or can be other info
  // to dispatch an async action
  const result1 = module.dispatchAsyncAction("asyncActionName", [/*parameters*/]);

updateState


updateState ( path, state, force )
  Updates the module state for the current useModule
[parameters]

  • path [required] : *Object / Array< String > / String, *If it's an Array< String >: ** to specify the path for updating the state; If it's a String: the string can be convert into an Array< String > 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.
  • state [optional] : Object/Any, The object to update the state in the given path
  • force [optional] : Boolean, Indicates whether force to update the state. Default is false.
  // If the old state is {key:'ovalue',key1:{key2:'ovalue'}}
  // the new state will be {key:'nvalue',key1:{key2:'ovalue'}}
  module.updateState({ "key":"nvalue" });
  // the new state will be {key:'nvalue',key1:{key2:'nvalue'}}
  module.updateState("key1,key2", "nvalue");

fireEvent


fireEvent ( eventName, params, from )
  Fires a specified event for the current useModule
[return]
  Object, The return value of the target event
[parameters]

  • eventName [required] : String, The event name
  • params [optional] : Array, The parameters for the given event
  • from [optional] : Object/Any, The from info that indicate who fire the event or can be other info
  // to fire an event 
  const result1 = module.fireEvent("eventName", [/*parameters*/]);

broadcast


broadcast ( channelName, message )
  Broadcasts message to all useModule elements via a specified channel, which can be received in all useModule components' onChannelMessage event.
[parameters]

  • channelName [required] : String, The channel name
  • message [required] : Object / Any, The message object, can be any value
  // to broadcast an message to all useModule elements
  useModule.broadcast("channelName","message");

useRef


useRef ( refName, value )
  Triggers a React.useRef to create a ref, which initialial value is 'value'. It can be retrieved by module.getRef('refName') .
[return]
  Object, The ref
[parameters]

  • refName [required] : String, The ref name
  • value [optional] : Object/Any, The given initialial value

getRef


getRef ( refName )
  Gets a specified ref by the given name, this ref was created by module.useRef('refName', 'value').
[return]
  Object, The ref
[parameters]

  • refName [required] : String, The ref name
  // to use(create) a ref
  const ref = module.useRef("refName", "init vaule");
  // to get the ref
  const ref1 = module.getRef("refName");  
  // or
  const ref2 = module.refs["refName"];

renderComAs


renderComAs ( x_id, replace, beforeNodes, afterNodes )
  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.
[parameters]

  • x_id [required] : String, The target element's x_id. The target element must be an enhanced component which powered by module.enhanceCom()
  • 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.
  • 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.
  • 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.
  const Com1= props => {
	  const { module } = useModule(props, { });
	  const XElem = module.enchanceCom("div");
	  return (
	  <div>
		  <XElem x_id="x_id1">original</XElem>
		  <button onClick={() =>{
			  module.renderComAs("x_id", <input />, false, false);
		  }}>replace</button>
		  <button onClick={() =>{
			  module.renderComAs("x_id", false, <div>before</div>, false);		  
		  }}>insert before</button>
		  <button onClick={() =>{
			  module.renderComAs("x_id", false, false, <div>after</div>);		  
		  }}>insert after</button>		  
		  <button onClick={() =>{
			  module.renderComAs("x_id", null, null, null);
		  }}>restore</button>
	  </div>);
  };

2.4. useModule instance - material-UI plugin functions

showSnackbar


showSnackbar ( message )
  To show a material-UI snackbar. It's an advanced function in material-UI plugin ( react-hook-module/plugin_mui )
[parameters]

  • message [required] : String/Object, The message (String), or the props (Object) of the Snackbar
  import { useModule } from "react-hook-module";
  // must import material-UI plugin
  import "react-hook-module/plugin_mui";
  //...
  // to show a snack bar
  module.showSnackbar("snack message");

alert


alert ( title, description, okCaption )
  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.
[parameters]

  • title [required] : String, The title text
  • description [required] : String, The description text
  • okCaption [optional] : String, The caption text for OK button. Default is "OK".
  import { useModule } from "react-hook-module";
  // must import material-UI plugin
  import "react-hook-module/plugin_mui";
  //...
  (async()=>{
      // to show an alert dialog
      await module.alert("title", "desc", "O K");
  })();

confirm


confirm ( title, description, okCaption, cancelCaption )
  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.
[return]
  Boolean, the confirm result.
[parameters]

  • title [required] : String, The title text
  • description [required] : String, The description text
  • okCaption [optional] : String, The caption text for OK button. Default is "OK".
  • cancelCaption [optional] : String, The caption text for cancel button. Default is "Cancel".
  import { useModule } from "react-hook-module";
  // must import material-UI plugin
  import "react-hook-module/plugin_mui";
  //...
  (async()=>{
      // to show an confirm dialog
      const result = await module.cofirm("title", "desc");
  })();

prompt


prompt ( title, description, defaultValue, okCaption, cancelCaption )
  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.
[return]
  String, the input text.
[parameters]

  • title [required] : String, The title text
  • description [required] : String, The description text
  • defaultValue [optional] : String, The default value text. Default is empty string.
  • okCaption [optional] : String, The caption text for OK button. Default is "OK".
  • cancelCaption [optional] : String, The caption text for cancel button). Default is "Cancel".
  import { useModule } from "react-hook-module";
  // must import material-UI plugin
  import "react-hook-module/plugin_mui";
  //...
  (async()=>{
      // to show an confirm dialog
      const result = await module.prompt("title", "desc");
  })();

showBackdrop


showBackdrop ( id, clickAway, style, transitionDuration, children)
  To show a backdrop for a given id. It's an advanced function in material-UI plugin ( react-hook-module/plugin_mui ).
[parameters]

  • id [optional] : String, The backdrop id, default is 'default'
  • clickAway [optional] : Boolean, To determine whether 'click' to hide the backdrop or not, default is true.
  • style [optional] : Object, To determine the backdrop's style, default is {}.
  • transitionDuration [optional] : Number, The transition duration in ms. Default is 300.
  • children [optional] : Array/Boolean, The children elements in the backdrop. Default is true > there'll be an CircularProgress in the backdrop.
  import { useModule } from "react-hook-module";
  // must import material-UI plugin
  import "react-hook-module/plugin_mui";
  //...
  module.showBackdrop( );

hideBackdrop


hideBackdrop ( id )
  To hide a backdrop for a given id. It's an advanced function in material-UI plugin ( react-hook-module/plugin_mui ).
[parameters]

  • id [optional] : String, The backdrop id, default is 'default'.
  import { useModule } from "react-hook-module";
  // must import material-UI plugin
  import "react-hook-module/plugin_mui";
  //...
  module.hideBackdrop( );

2.5. useModule instance - request plugin functions

request


request ( url, data, method, baseURL, AUTH_TOKEN, header, config )
  To request data from a remote service endpoint, by 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.
[return]
  Object, the request result.
[parameters]

  • url [required] : String, The url option for an axios reqeust
  • data [optional] : Object/String, The data (ArrayBuffer, ArrayBufferView, URLSearchParams, FormData, File, Blob, or queryString) option for an axios reqeust Default is null.
  • method [optional] : String, The method (get/post/put/delete/patch/head/options) option for an axios reqeust. Default is 'get'.
  • baseURL [optional] : String, The base URL option for an axios reqeust. Default is empty string.
  • AUTH_TOKEN [optional] : String, The AUTH_TOKEN option for an axios reqeust. Default is null.
  • header [optional] : Object, The header option for an axios reqeust. Default is {}.
  • config [optional] : Object, The config option for an axios reqeust.Default is {}.
  import { useModule } from "react-hook-module";
  // must import request plugin for 
  import "react-hook-module/plugin_request";
  //...
  const App = props => {
      const { module } = useModule(props, { }); 
      return (
        <div>
          <button onClick={async () => {
            const result = await  module.request(useModule.resolveURL("./service/endpoint"));
            console.log( result );
          }}>module.request</button>
        </div>
      );
  };

request.fetch


request.fetch( )
  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.
[return]
  Object, the request result.

  import { useModule } from "react-hook-module";
  import { If } from "react-hook-module";
  // must import request plugin
  import "react-hook-module/plugin_request";
  //...
  const App = props => {
      // If no 'req_url', the request will be undefined 
      const { module, request } = useModule(props, {
        props:{
          req_url: useModule.resolveUrl("./service/endpoint"),
          req_execute: false
        }
      }); 
      return (
        <div>
          <div>Status: [{request.status}]</div>
          <If condition={request.error} >
            error: {request.error && JSON.stringify(request.error)}
          </If>
          <If condition={request.response} >
            data: {request.response && JSON.stringify(request.response)}
          </If>
          <button onClick={async () => {
            const result = await request.fetch();
            console.log( result );
          }}>fetch</button>
        </div>
      );
  };

Normally, you don't need to set 'req_execute' to false for the default request in an useModule. The default request will be executed automatically.

  import { useModule } from "react-hook-module";
  import { If } from "react-hook-module";
  // must import request plugin
  import "react-hook-module/plugin_request";
  //...
  const App = props => {
      // If no 'req_url', the request will be undefined 
      const { module, request } = useModule(props, {
        props:{
          req_url: useModule.resolveUrl("./service/endpoint")
        }
      }); 
      return (
        <div>
          <div>Status: [{request.status}]</div>
          <If condition={request.error} >
            error: {request.error && JSON.stringify(request.error)}
          </If>
          <If condition={request.response} >
            data: {request.response && JSON.stringify(request.response)}
          </If>
        </div>
      );
  };

request.cancel


request.cancel( )
  To cancel the useModule's default request.

  import { useModule } from "react-hook-module";
  // must import request plugin
  import "react-hook-module/plugin_request";
  //...
  const App = props => {
    // If no 'req_url', the request will be undefined 
    const { module, request } = useModule(props, {
      props:{
        req_url: useModule.resolveUrl("./service/endpoint")
      }
    }); 
    // cancel the useModule's default request
    React.useEffect(() => request.cancel(), [request]);
      return (
        <div>
          <div>Status: [{request.status}]</div>
        </div>
      );
  };

2.6. useModule instance - router plugin functions

router.navigate


router.navigate ( route, state )
  *To navigate to target route (document). *
[parameters]

  • route [required] : String, The route path.
  • state [optional] : Object, The state. [router.navigate('/', {replace: true})] equals to [router.replace('/')] .

router.replace


router.replace( route )
  *To replace the document by target route. *
[parameters]

  • route [required] : String, The route path.

--->router.replace(route) equlas to router.navigate(route ,{replace: true}).

router.setSearchParams


router.setSearchParams( params )
  *[for useModule router plugin] To update the search parameters. *
[parameters]

  • params [required] : Object/String, The search params. Object or queryString.
  import { useModule } from "react-hook-module";
  // must import request plugin
  import { BrowserRouter as  Router, RelativeRouter } from  "react-hook-module/plugin_router";
  //...
  const App = props => {
      // If no 'router' in props, or 'props.router' is false, the router will be undefined 
      const { module, router } = useModule(props, {
        props:{
          enableRouter : true
        }
      }); 
      return (
        <Router>
	        <RelativeRouter>
				<div path="/path1">path1</div>
				<div path="/path2">path2</div>
				<div path="/about">about</div>
				<div path="*">Not Support</div>
	        </RelativeRouter>
	        <div>
				<button onClick={() => {
					router.navigate('/about');
				}}>Route to "/about"</button>
				<button onClick={() => {
					router.setSearchParams('k1=v1&k2=v2');
				}}>setSearchParams</button>				
	        </div>
        </Router>
      );
  };

2.7. useModule instance - auth plugin functions

auth.signIn


auth.signIn ( )
  To trigger the sign in action.

auth.signOut


auth.signOut ( )
  To trigger the sign out action.

auth.signUp


auth.signUp( )
  To trigger the sign up action.

File - auth_fake.js

  import {utils} from "react-hook-module";
  // singIn function
  const signIn = function(){
    const auth = this;
    const user = {email:"[email protected]"};
    setTimeout(() => {
      auth.setUser(user);
      utils.setCookie("user", user);
    }, 500);
  };
  // signOut function
  const signOut = function(){
    this.setUser(null);
    utils.removeCookie("user");
  };
  // signUp function
  const signUp = function(){
    console.log("signUp function");
  };  
  const authInit = function(){
    const auth = this;
    const user = utils.getCookie("user");
    user && auth.setUser(user);
    return function(){
      // nothing
    };
  };
  export default {signIn, signOut, authInit};

File - index.js

  import React from "react";
  import ReactDOM from "react-dom";
  import { useModule } from "react-hook-module";
  import { ProvideAuth } from "react-hook-module/plugin_auth";
  import App from "./App";
  import configure from "./auth_fake.js";
  ReactDOM.render( (
    <React.StrictMode>
      <ProvideAuth {...configure} >
        <App path="/*" />
      </ProvideAuth>
    </React.StrictMode>
  ), document.getElementById("root"));

File - App.js

  import React from "react";
  import { useModule } from "react-hook-module";
  import { If } from "react-hook-module";
  const App = props => {
      // If no 'auth' in props, or 'props.auth' is false, the auth will be undefined 
      const { module, auth } = useModule(props, { enableAuth: true });
      return (
      <React.Fragment>
        <If condition={auth && auth.user} >
          <div> Signed in successfully!</div>
          <div> User Email: {auth && auth.user && auth.user.email} </div>
          <div> <button onClick={() => auth.signOut()}>Sign Out</button> </div>
        </If>
        <If condition={!auth || !auth.user} >
          <div><button onClick={() => auth.signIn()}>Sign In</button></div>
        </If>
      </React.Fragment>
    );
  };

3. Quickstart

3.1. Basic Demo

import React from "react";
import { useModule } from "react-hook-module";

export default (props) => {
  const { module } = useModule(props, {
    actions: {
      callback: (msg) => module.updateState({ msg })
    }
  });
  return (
    <div style={{ border: "1px dashed", padding: "1em" }}>
      <h2>useModule demo {">"} modules interaction</h2>
      <div>
        <strong>
          {"<"}Module1{">"}
        </strong>
      </div>{" "}
      <p />
      <button
        onClick={(e) =>
          module.updateStateFor("alias_in_parent", {
            value: "Value updated by updateState"
          })
        }
      >
        updateState for Module2
      </button>
      {" | "}
      <button
        onClick={(e) =>
          module.sendMessageTo(
            "alias_in_parent",
            "Value updated by sendMessage"
          )
        }
      >
        sendMessage to Module2
      </button>
      {" | "}
      <button
        onClick={(e) =>
          useModule.dispatchActionTo("global_uid", "updValue", [
            "Value updated by dispatchAction"
          ])
        }
      >
        dispatchAction to Module2
      </button>
      <p />
      <div> Callback Message: "{module.state.msg || "No callback yet"}"</div>
      <p />
      <Module2 usemodule_alias="alias_in_parent" usemodule_parent={module} />
      <Module2 usemodule_uid="global_uid" />
    </div>
  );
};

export const Module2 = (props) => {
  const { module } = useModule(props, {
    props: {
      onMessage: (value) => {
        module.updateState({ value });
        module.parent.dispatchAction("callback", ["Message received"]);
      }
    },
    actions: {
      updValue: (value) => {
        module.updateState({ value });
      }
    }
  });
  return (
    <div style={{ border: "1px dashed", padding: "1em" }}>
      <div>
        <strong>
          {"<"}Module2{">"}
        </strong>{" "}
        ( {props.usemodule_alias ? "alias='" + props.usemodule_alias + "'" : ""}{" "}
        {props.usemodule_uid ? "uid='" + props.usemodule_uid + "'" : ""} )
      </div>{" "}
      <p />
      value = "<strong>{module.state.value}</strong>"
    </div>
  );
};

Screenshot

Module Tree

[root]
  │  
  ├─<Module1>
  │     │  
  │     └<Module2 usemodule_alias="alias_in_parent">
  │      
  └<Module2 usemodule_uid="global_uid">

Open the demo in CodeSandbox

3.2. Meterial UI Demo

import React from "react";
import { useModule } from "react-hook-module";
import "react-hook-module/plugin_mui";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core";
import { Dialog } from "@material-ui/core";
import { TextField } from "@material-ui/core";
import { DialogActions } from "@material-ui/core";
import { DialogContent } from "@material-ui/core";
import { DialogContentText } from "@material-ui/core";
import { DialogTitle } from "@material-ui/core";

const useStyles4basic = makeStyles((theme) => ({
  item: { margin: theme.spacing(1) },
  container: { padding: theme.spacing(1) }
}));

const Module_Dialog = (props) => {
  const styles_basic = useStyles4basic(props || {});
  const { module } = useModule(props, {});
  return (
    <React.Fragment>
      <div>
        <Button
          variant="contained"
          color="primary"
          className={styles_basic.item}
          onClick={async (e) => {
            await module.alert("Alert 1");
          }}
        >
          Alert 1
        </Button>
        <Button
          variant="contained"
          color="secondary"
          className={styles_basic.item}
          onClick={async (e) => {
            const rst = await module.confirm("Confirm 1");
            alert(rst);
          }}
        >
          Confirm 1
        </Button>
        <Button
          variant="contained"
          color="default"
          className={styles_basic.item}
          onClick={async (e) => {
            const rst = await module.prompt("Prompt 1");
            alert(rst);
          }}
        >
          Prompt 1
        </Button>
      </div>
      <div>
        <Button
          variant="contained"
          color="primary"
          className={styles_basic.item}
          key="cyenksua"
          onClick={(e) => {
            useModule.updateStateFor("Alert_1", { open: true });
          }}
        >
          Alert 2
        </Button>
        <Button
          variant="contained"
          color="secondary"
          className={styles_basic.item}
          onClick={(e) => {
            useModule.dispatchActionTo("Confirm_1", "open");
          }}
        >
          Confirm 2
        </Button>
        <Button
          variant="contained"
          color="default"
          className={styles_basic.item}
          onClick={(e) => {
            useModule.sendMessageTo("Prompt_1", "open");
          }}
        >
          Prompt 2
        </Button>
      </div>

      <Alert
        open={false}
        usemodule_alias="Alert_1"
        usemodule_parent="{module}"
        title="Alert 2"
        description="Description"
        onOK={() => alert("OK")}
      ></Alert>
      <Confirm
        open={false}
        usemodule_alias="Confirm_1"
        usemodule_parent="{module}"
        title="Confirm 2"
        description="Description"
        onOK={() => alert("OK")}
        onCancel={() => alert("onCancel")}
      ></Confirm>
      <Prompt
        open={false}
        usemodule_alias="Prompt_1"
        usemodule_parent="{module}"
        title="Prompt 2"
        description="Description"
        onOK={(txt) => alert("Result: " + txt)}
        onCancel={() => {
          alert("onCancel");
        }}
      ></Prompt>
    </React.Fragment>
  );
};

export default Module_Dialog;

export const Alert = (props) => {
  const { module } = useModule(props, {
    props: {
      open: true,
      title: "Title",
      description: "Description",
      onOK: () => {}
    },
    state: {
      open: false
    },
    actions: {
      open: function () {
        this.updateState({ open: true });
      },
      close: function () {
        this.updateState({ open: false });
      }
    }
  });
  const [defaultState, setDefaultState] = React.useState({
    open: false
  });

  return (
    <Dialog
      open={
        (module.props && module.props.open) ||
        (module.state && module.state.open)
      }
      onClose={() => module.dispatchAction("close")}
      fullWidth
      aria-labelledby="alert_9za5tayt_title"
      aria-describedby="alert_9za5tayt_description"
      key="7e8gz5b3"
    >
      <DialogTitle id="alert_9za5tayt_title">
        {" "}
        {module.props && module.props.title}{" "}
      </DialogTitle>
      <DialogContent>
        <DialogContentText id="alert_9za5tayt_description">
          {module.props && module.props.description}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button
          onClick={() => {
            module.props.onOK();
            module.dispatchAction("close");
          }}
          color="primary"
        >
          {" "}
          OK{" "}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export const Confirm = (props) => {
  const { module } = useModule(props, {
    props: {
      open: true,
      title: "Title",
      description: "Description",
      onOK: () => {},
      onCancel: () => {}
    },
    state: {
      open: false
    },
    actions: {
      open: function () {
        this.updateState({ open: true });
      },
      close: function () {
        this.updateState({ open: false });
      }
    }
  });
  const [defaultState, setDefaultState] = React.useState({
    open: false
  });

  return (
    <Dialog
      open={
        (module.props && module.props.open) ||
        (module.state && module.state.open)
      }
      onClose={() => module.dispatchAction("close")}
      fullWidth
      aria-labelledby="confirm_jlh80pil_title"
      aria-describedby="confirm_jlh80pil_description"
      key="2h6e3jqi"
    >
      <DialogTitle id="confirm_jlh80pil_title">{props.title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="confirm_jlh80pil_description">
          {props.description}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button
          onClick={() => {
            module.props.onCancel();
            module.dispatchAction("close");
          }}
          color="secondary"
        >
          Cancel
        </Button>
        <Button
          onClick={() => {
            module.props.onOK();
            module.dispatchAction("close");
          }}
          color="primary"
        >
          OK
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export const Prompt = (props) => {
  const { module } = useModule(props, {
    props: {
      open: true,
      title: "Title",
      description: "Description",
      onOK: () => {},
      onCancel: () => alert(9),
      onMessage: (msg) => {
        if (msg === "open") {
          module.updateState({
            open: true
          });
        }
      }
    },
    state: {
      open: false
    },
    actions: {
      open: function () {
        this.updateState({
          open: true
        });
      },
      close: function () {
        this.updateState({
          open: false
        });
      }
    }
  });
  const [defaultState, setDefaultState] = React.useState({
    open: false
  });

  return (
    <Dialog
      open={
        (module.props && module.props.open) ||
        (module.state && module.state.open)
      }
      onClose={() => module.dispatchAction("close")}
      fullWidth
      aria-labelledby="prompt_fn69vqpc_title"
      aria-describedby="prompt_fn69vqpc_description"
      key="blg87o2c"
    >
      <DialogTitle id="prompt_fn69vqpc_title">{props.title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="prompt_fn69vqpc_description">
          {props.description}
        </DialogContentText>
        <TextField
          autoFocus
          margin="dense"
          defaultValue=""
          fullWidth
          onChange={(e) =>
            setDefaultState(
              Object.assign({}, defaultState, { text: e.target.value })
            )
          }
        ></TextField>
      </DialogContent>
      <DialogActions>
        <Button color="secondary" onClick={() => props.onCancel()}>
          Cancel
        </Button>
        <Button
          onClick={() => {
            props.onOK(defaultState.text);
            module.dispatchAction("close");
          }}
          color="primary"
        >
          OK
        </Button>
      </DialogActions>
    </Dialog>
  );
};

Screenshot

Module Tree

[root]
  │  
  └─<Module_Dialog >
         │  
         ├<Alert usemodule_alias="Alert_1">
         │  
         ├<Confirm usemodule_alias="Confirm_1">
         │  
         └<Prompt usemodule_uid="Prompt_uid">

Open the demo in CodeSandbox

npm

npm link