{"id":26950264,"url":"https://github.com/coolshare/coolsharereactpubsub","last_synced_at":"2026-04-02T03:03:54.054Z","repository":{"id":57207144,"uuid":"86194926","full_name":"coolshare/CoolshareReactPubSub","owner":"coolshare","description":"A package/service to provide  publish/subscribe pattern for communication in React","archived":false,"fork":false,"pushed_at":"2017-05-05T06:30:12.000Z","size":67,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-10T21:52:17.898Z","etag":null,"topics":["coolshare","pub-sub","publish-subscribe","react","redux","toolkits"],"latest_commit_sha":null,"homepage":"http://markqian.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coolshare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-25T23:27:08.000Z","updated_at":"2017-06-20T23:56:45.000Z","dependencies_parsed_at":"2022-09-08T19:11:50.371Z","dependency_job_id":null,"html_url":"https://github.com/coolshare/CoolshareReactPubSub","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/coolshare/CoolshareReactPubSub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareReactPubSub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareReactPubSub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareReactPubSub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareReactPubSub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coolshare","download_url":"https://codeload.github.com/coolshare/CoolshareReactPubSub/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareReactPubSub/sbom","scorecard":{"id":304224,"data":{"date":"2025-08-11","repo":{"name":"github.com/coolshare/CoolshareReactPubSub","commit":"e54c19d07df8b27de555dc2f22e6fe37c7465744"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-17T21:36:03.909Z","repository_id":57207144,"created_at":"2025-08-17T21:36:03.909Z","updated_at":"2025-08-17T21:36:03.909Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279009511,"owners_count":26084609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["coolshare","pub-sub","publish-subscribe","react","redux","toolkits"],"created_at":"2025-04-02T23:19:30.719Z","updated_at":"2025-10-12T00:45:52.102Z","avatar_url":"https://github.com/coolshare.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Coolshare Pub/Sub for React - An approach different from Flux\r\n===========================\r\n\r\nBy Mark Qian 3/2017 (markqian@hotmail.com)\r\n\r\nThe demo page: http://reactpubsub.coolshare.surge.sh\r\n\r\nDescription:\r\n************\r\n\r\n\tCommunication among React components could be a pain in case you use react without Flux \r\n\tframework. Comparing to Flux, this package is a different/easier. \r\n\r\n\tSimilar to Redux:\r\n\t****************\t\r\n\t - both publish method in PubsubManager and Pulisher component act like the \"Action Creator\",\r\n\t   where publish method allows API or event handler to generate \"Actions\" and the Publish \r\n\t   component generate \"Actions\" from user interaction. \r\n\t - An event (including a topicName with data) is an \"Action\"\r\n\t - PubsubManager is the \"Dispatcher\" and topicName is the type of \"Action\"\r\n\t - Event handler is the \"Reducer\". In case of React, the event handler makes change to\r\n\t   the state/model of React view to trigger the view update.\r\n\t \r\n\tDifferent from Redux:\r\n\t*********************\r\n\t - we do not force the event handler to only work on the model while it acts as other roles \r\n\t   such as an \"Action creator\" that publish an event.\r\n\t - you need to learn almost nothing to use it\r\n\t - One key advantage provided by Pub/Sub pattern is the communication: instead of passing references \r\n\t   around the component hierarchy in order to reach the other party, feels like a baby crawling on \r\n\t   a 2D surface (since you need to travel the hierarchy node by node), you can fly like a bird in \r\n\t   a 3D space: this package allows you to communicate between any two or more points including\r\n\t   any components React Hierarchy and services which in turn update the remote model. And the callback\r\n\t   of remote request then publishes another topic (event/action) to update the state of view\r\n\t   (setView in React).\r\n\t \r\nWho should use this:\r\n********************\r\n\r\n\t for those who just want to do something quickly with React instead of dealing or learning more on\r\n\t Redux or Mobx. You need to learn almost nothing for using this package. \r\n\r\n\r\nThe key features:\r\n\r\n - You can publish topics from both javascript and JSX\r\n - You can specify any event to trigger the publishing\r\n - Macro Key Words allow you to publish with data you specified.\r\n \r\n\r\nInstructions to use:\r\n\r\n A). publish a topic in two ways:\r\n \r\n\t0). install this package:\r\n\t\r\n\t\tnpm install coolshare_react_pub_sub --save\r\n \r\n \t1). publish from javascript. To publish a topic in javascript, \r\n \t    you need to do the following:\r\n \t    \r\n \t    //Import\r\n \t    import PubSubManager from 'PubSubManager'\r\n \t    \r\n \t    class MyComponent extends Component {\r\n \t    \thandleRemoteAPIResponse() {\r\n\t            PubSubManager.publish(\"/MyTopic1\", {\"data\":{\"name\":\"John\"}});\r\n\t  \t\t}\r\n\t\t\t//...\r\n \t    }\r\n \t    \r\n \t    where the second parameter of the \"publish\" method is \"options\" which contains the \r\n \t    data you like to pass with the topic.\r\n \t    \r\n \t2). publish from jsx (HTML). To publish a topic in jsx (HTML), \r\n \t    you need to do the following:\r\n \t    \r\n \t    render() {\r\n          return (\r\n            \u003cdiv\u003e\r\n               \u003cPublisher topic=\"/left/button\"\u003e\u003cbutton\u003eLeft\u003c/button\u003e\u003c/Publisher\u003e\r\n               \u003cPublisher topic=\"/left/Publish\"\u003e\u003ca href=\"#\" className=\"ddd\"\u003eaaaa\u003c/a\u003e\u003c/Publisher\u003e\r\n               \u003cPublisher topic=\"/left/Publish\" event=\"Change\" options=\"{'name':'Mark', 'address':'123 Main Ave San Jose, CA'}\"\u003e\r\n                 \u003cselect\u003e\r\n                   \u003coption value=\"a\"\u003eA\u003c/option\u003e\r\n                   \u003coption value=\"b\"\u003eB\u003c/option\u003e\r\n                 \u003c/select\u003e\r\n               \u003c/Publisher\u003e\r\n          \t   \u003cPublisher topic=\"/left/Publish\"\u003e\r\n          \t     \u003cMyComponentC/\u003e\r\n          \t   \u003c/Publisher\u003e\r\n          \u003c/div\u003e  \r\n        );\r\n      }\r\n      \r\n      where the attribute \"options\", optional, contains the data you want to pass with the topic.\r\n      The content contained by \"options\" needs to be in a JSON format which will be evaluated into a javascript object.\r\n      \r\n      The \"event\" attribute is optional and the default is \"Click\".\r\n      \r\n      Please also pay attention to the Case of your \"event\". You should use \"MouseOver\" instead of \"mouseover\", \"Mouseover\" or\r\n      \"mouseOver\" and \"Change\" instead of \"change\".\r\n      \r\n      Note:\r\n      *****\r\n      \r\n      When \"publish\" tag/component contains regular DOM elements such as \"div\", \"a\", \"button\" and \"select\", the specified \r\n      \"event\" is bound directly to the contained elements but the contained elements are not regular DOM elements (such as\r\n      the last \"Publish\" element above) the specified event will be bound to a \"div\" element containing the contained elements.\r\n      \r\n      Macro Key Words:\r\n      ***************\r\n      \r\n        1). ___VALUE___ - this key word pointing to the value of the contained element. For example\r\n           \r\n\t           \u003cPublisher topic=\"/left/dropdown/bg\" event=\"Change\" options=\"{'bgColor':'___VALUE___'}\"\u003e\r\n\t           \t\u003cselect\u003e\r\n\t           \t\t\u003coption value=\"#ff0000\"\u003eRed\u003c/option\u003e\r\n\t           \t\t\u003coption value=\"#00ff00\"\u003eGreen\u003c/option\u003e\r\n\t           \t\t\u003coption value=\"#0000ff\"\u003eBlue\u003c/option\u003e\r\n\t           \t\u003c/select\u003e\r\n\t           \u003c/Publisher\u003e\r\n\t           \r\n\t          The example above indicate the \"bgColor\" in the options will be set to the value of select when a change\r\n\t          event occurs.\r\n\t        \r\n\t    2). ___FUNCTION___ - this key word pointing to the return value of a function of the component where the publisher reside.\r\n\t          For example, \r\n\t          \r\n\t          class Inside extends Component {\r\n\t\t\t\t  //...\r\n\t\t\t\t  getColor() {\r\n\t\t\t\t\t  return pubSubManager.getRandomColor();\r\n\t\t\t\t  }\r\n\t\t\t\t  render() {\r\n\t\t\t\t    var self = this;\r\n\t\t\t\t    return (\t\t\t\t   \r\n\t\t\t\t        ...\r\n\t\t\t\t          \u003cPublisher topic=\"/inside/function/fg\" owner={self} options=\"{'color':{'___FUNCTION___':'getColor'}}\"\u003e\r\n\t\t\t\t              \u003cbutton\u003eButton in Inside:set text color of subscriber randomly\u003c/button\u003e\r\n\t\t\t\t          \u003c/Publisher\u003e\r\n \t\t\t\t\t\t ...    \r\n\t\t\t\t    );\r\n\t\t\t\t  }\r\n\t\t\t\t}\r\n        \r\n              In the example above, the value of \"color\" in \"options\" will be assigned with the return value of \"getColor\".\r\n              One requirement to this feature is that you need to pass the owner's (the function's owner) reference to the \r\n              attribute \"owner\".\r\n        \r\n               \r\n  B). subscribe/unsubscribe a topic\r\n  \r\n    To subscribe a topic, you need to do the following:\r\n \t    \r\n \t    1). from javascript\r\n\t \t    //Import\r\n\t \t    import PubSubManager from 'PubSubManager'\r\n\t \t    \r\n\t\t\tclass MyComponent extends Component {\r\n\t\t\t\tconstructor (props) {\r\n\t\t\t\t\tsuper(props);\r\n\t\t\t\t\tthis.subscriptionMap = {};\r\n\t\t\t\t}\r\n\t\t\t\tcomponentWillMount() {\r\n\t\t\t\t\tvar self = this;\r\n\t\t\t\t\tvar topic = \"/MyTopic1\";\r\n\t\t\t\t\tthis.subscriptionMap[topic] = pubSubManager.subscribe(topic, function(options) {\r\n\t\t\t\t\t\t//handle the topic here: make modification to the model and trigger the view update\r\n\t\t\t\t\t\tself.setState(...);\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t//...\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t//Or generate another \"Action\"\r\n\t\t\t\t\t\tPubSubManager.publish(\"/MyTopicX\", {\"data\":{\"address\":\"123 Main St\"}});\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t});\r\n\t\t  \t\t}\r\n\t\t\t\t//...\r\n\t\t\t\tcomponentWillUnmount() {\r\n\t\t\t\t\tvar topic = \"/MyTopic1\";\r\n\t\t\t\t\tPubSubManager.unsubscribe(topic, this.subscriptionMap[topic]);\r\n\t\t\t\t}\r\n\t \t    }\r\n\t \t    \r\n\t 2). from JSX(HTML)\r\n\t \t\t//Import\r\n\t \t    import Subscriber from './PubSub/Subscriber';\r\n\t \t    \r\n\t \t    \u003cSubscriber topic=\"/right/text\" field=\"innerHTML\" optionField=\"text\"\u003e\u003cp/\u003e\u003c/Subscriber\u003e\r\n\t \t    \r\n\t \t    where attribute \"field\" specify what field of wrapped element (\u003cp/\u003e) to make change. \r\n\t \t    Attribute \"optionField\" specify what field in the data receive to use.  \r\n\t\r\n  \r\n  C). To run the sample code, you need to \r\n \r\n\t\t    \r\n\t\t0). Prepare required environment\r\n\t\t\r\n\t\t    you need to install node.js\r\n\t\t    and git\r\n\t\t  \r\n\t\t1). Download it by\r\n\t\t\r\n\t\t    cd c:\\\r\n\t\t    \r\n\t\t    git clone https://github.com/coolshare/CoolshareReactPubSub.git CoolshareReactPubSub\r\n\t\t    \r\n\t\t    then \r\n\t\t    \r\n\t\t    cd CoolshareReactPubSub\r\n\t\t    \r\n\t\t2). Do installation\r\n\t\t         \r\n\t\t\tnpm install\r\n\t\t       \r\n\t\t       \r\n\t\t3). Start the server and browser by\r\n\t\t\r\n\t\t    npm start\r\n\t\t         \r\n\t\t\r\n\t\t    You should see a browser page is opened at http://localhost:3000\r\n\t\t    \r\n\t\tClick each component on the page and the result will be shown in the console.\r\n\t\t\r\n\t\tHave fun!\r\n\r\n  D). To install it into your React application, you need to \r\n  \r\n     1). npm install --save coolshare_react_pub_sub_kit\r\n     \r\n     2). Follow the instructions in A). B). above to use it in your application.\r\n     \r\n     \r\nGo Mark's home page http://MarkQian.com to see more.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoolshare%2Fcoolsharereactpubsub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoolshare%2Fcoolsharereactpubsub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoolshare%2Fcoolsharereactpubsub/lists"}