{"id":25182277,"url":"https://github.com/vipcxj/react-async-wrapper","last_synced_at":"2026-04-28T00:32:46.834Z","repository":{"id":30697190,"uuid":"125746940","full_name":"vipcxj/react-async-wrapper","owner":"vipcxj","description":"a react component help to manage async props and component.","archived":false,"fork":false,"pushed_at":"2023-03-01T19:03:47.000Z","size":1346,"stargazers_count":2,"open_issues_count":12,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-25T07:21:30.297Z","etag":null,"topics":["async","async-component","async-props","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vipcxj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2018-03-18T16:51:04.000Z","updated_at":"2023-01-30T19:56:41.000Z","dependencies_parsed_at":"2025-02-09T17:41:55.754Z","dependency_job_id":null,"html_url":"https://github.com/vipcxj/react-async-wrapper","commit_stats":null,"previous_names":["vipcxj/react-async"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/vipcxj/react-async-wrapper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vipcxj%2Freact-async-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vipcxj%2Freact-async-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vipcxj%2Freact-async-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vipcxj%2Freact-async-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vipcxj","download_url":"https://codeload.github.com/vipcxj/react-async-wrapper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vipcxj%2Freact-async-wrapper/sbom","scorecard":{"id":922964,"data":{"date":"2025-08-11","repo":{"name":"github.com/vipcxj/react-async-wrapper","commit":"7e4f11abb0eb4eb99fe2e43eedfc691f4b0df8d6"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/26 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":"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":"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":"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":"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":"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":"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":"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":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"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"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 4 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"77 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653","Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj","Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67","Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-25T06:24:54.367Z","repository_id":30697190,"created_at":"2025-08-25T06:24:54.367Z","updated_at":"2025-08-25T06:24:54.367Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32361477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T20:07:02.737Z","status":"ssl_error","status_checked_at":"2026-04-27T20:07:00.910Z","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":["async","async-component","async-props","react"],"created_at":"2025-02-09T17:31:37.560Z","updated_at":"2026-04-28T00:32:46.818Z","avatar_url":"https://github.com/vipcxj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-async-wrapper \u0026middot; ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg) [![npm version](https://img.shields.io/npm/v/react-async-wrapper.svg?style=flat)](https://www.npmjs.com/package/react-async-wrapper)\n\nAsync component wrapper for [React](https://reactjs.org/).\n\n## Installation\n\nUsing [npm](https://www.npmjs.com/):\n\n    $ npm install --save react-async-wrapper\n    \n## Demo\n\n[storybook](https://vipcxj.github.io/react-async-wrapper/)\n\n## Example\n    \n```javascript\nimport { AsyncComponent } from 'react-async-wrapper';\n\n//js version sleep.\nconst sleep = async t =\u003e new Promise(resolve =\u003e setTimeout(resolve, t));\n//the component to be wrapped.\nconst Demo = ({a, b, c, d}) =\u003e (\n    \u003cul\u003e\n        \u003cli\u003e{`a: ${a}`}\u003c/li\u003e\n        \u003cli\u003e{`b: ${b}`}\u003c/li\u003e\n        \u003cli\u003e{`c: ${c}`}\u003c/li\u003e\n        \u003cli\u003e{`d: ${d}`}\u003c/li\u003e\n    \u003c/ul\u003e\n);\n//a function creator, which create a function accept a method for updating the progress and return a promise.\nconst progressReturn = (v, t) =\u003e async (updater) =\u003e {\n    const step = t / 100;\n    for (let i = 0; i \u003c 100; ++i) {\n        await sleep(step);\n        updater(i / 100);\n    }\n    return v;\n};\n//a loading component, which accepts all resolved prop and their progress.\nconst ProgressLoading = ({ a, b, c, d, progress }) =\u003e (\n    \u003cul\u003e\n        \u003cli\u003e{`a: ${(progress.a * 100).toFixed()}%`}\u003c/li\u003e\n        \u003cli\u003e{`b: ${(progress.b * 100).toFixed()}%`}\u003c/li\u003e\n        \u003cli\u003e{`c: ${(progress.c * 100).toFixed()}%`}\u003c/li\u003e\n        \u003cli\u003e{`d: ${(progress.d * 100).toFixed()}%`}\u003c/li\u003e\n    \u003c/ul\u003e\n);\n\nexport const AsyncDemo = () =\u003e {\n    return (\n        \u003cAsyncComponent\n         loadingComponent={ProgressLoading} //component show when loading\n         batch={false} //if true, only when all props resolved, the wrapped component will be render.\n         asyncProps={{ //async props\n            a: progressReturn(1, 4000), //must be a function. async function means async props.\n            b: progressReturn(2, 3000), //the function can accept a optional progress updater method.\n            c: progressReturn(3, 2000),\n            d: progressReturn(4, 1000),\n            e: () =\u003e 1, //a function return constant is also permit, which cause the prop is sync.\n        }}\u003e\n            \u003cDemo/\u003e\n        \u003c/AsyncComponent\u003e\n    );\n};\n//if all props is sync, the component behavior the same as wrapped component.\n\n```\n\n## Component\n\n### AsyncComponent\n\nA wrapper component to make async job easy.\n\n#### Properties\n- *batch* - **bool** - `false`\n\n  If true, only when all async props are resolved, the wrapped component is rendered again. \n  Otherwise, the wrapped component will be updated when any async prop is resolved.\n\n- *asyncJobs* - **[ func() : (Promise\\\u003cany\\\u003e | any) ]** - `[]`\n\n  The async jobs. \n  Compared to async props, they will not provide the props to the wrapped component, \n  but they should be done before the wrapped component finally render.\n  The word 'finally' means the wrapped component will be updated several time if 'batch' set to false.\n  \n- *asyncProps* - **{ property: func( progressUpdater: ( func(number):void ) ) : (Promise\\\u003cany\u003e | any) }** - `{}`\n\n  All async props should be declared here.They should be functions. \n  If the function return a promise, it will be a real async prop, otherwise it is still a sync prop.\n  The es6 async function is supported. In fact it is just a function return promise.\n  The async component will provide every function with a method to update the progress which is a number range from 0 to 1.\n  \n- *asyncPropOpts* - **{ property: { defaultProp: any } }** - `{}`\n\n  The option of the async props. At this moment, only 'defaultProp' is supported.\n  \n- *asyncPropsMapper* - **func( props: { property: any } ):{ property: any }** - `props =\u003e props`\n\n  Accept the resolved async props, and return the props provide to the wrapped component.\n\n- *syncProps* - **{ property: any }** - `{}`\n\n  The sync props. This is useful when providing component or asyncComponent prop instead of children node as wrapped component.\n  \n- *component* - **Component** - `null`\n\n  If specialized, the async wrapper will use this as the wrapped component instead of the children components.\n  \n- *asyncComponent* - **func() : ( Promise\\\u003cComponent\\\u003e | Component )** - `null`\n\n  If specialized, the async wrapper will use this as the wrapped component when resolved instead of component prop and the children components.\n  \n- *errorComponent* - **Component** - `() =\u003e null`\n\n  This component will be used to show the error.\n  \n- *loadingComponent* - **Component** - `() =\u003e null`\n\n  When the async jobs and async props have not been resolved yet, this component will be rendered. \n  However, if this prop is not specialized, the wrapped component with default and partial resolved props will be rendered instead.\n  \n- *onError* - **func( error: any ) : void** - `() =\u003e null`\n\n  The error callback. \n  It will be called when a error is throwed \n  during the async jobs is running or the async props is resolved.\n  \n- *delay* - **number** - `0`\n\n  A number greater than 0 will force the wrapped component rendering with a delay.\n  \n- *unwrapDefault* - **bool** - `true`\n  \n  Useful when provide the asyncComponent with dynamic import method.\n  The dynamic import method return a promise resolving a module object.\n  However, we often need the module.default instead of the module itself.\n  This option make the wrapper try to use module.default when available\n  \n- *reloadOnUpdate* - **bool** - `false`\n\n  Whether to reload when the AsyncComponent is updated.\n\n- *reloadDependents* - **{ property: any }** - `null`\n\n  The dependents which using to decide whether to reload. Shallow equal is used to compare changed.\n  Only valid when reloadOnUpdate is true.\n  If set null or undefined, means use all props to decide.\n  \n- *reloader* - **{ reload: func, isReload: func, resetReload: func,}** - `null`\n\n  An object create by `AsyncComponent.createReloader`, \n  The api `reloader.reload()` can be used to force a reload task.\n  \n## API\n\n### AsyncComponent.createReloader\n\nCreate an reloader object which can be used to force a reload task.\n\n#### signature\n\n`(compInst: object) =\u003e { reload: () =\u003e null }`\n\n#### params\n\n##### compInst - **object**\n\nThe react component instance, usually the component instance which using the AsyncComponent.\n\n#### return\n\nAn reloader object, which should be used as the 'reloader' prop of the AsyncComponent.\nOn the other side, `reloader.reload()` will force the AsyncComponent to be reload.\n\n### makeAsync\n\nA high order component version of **AsyncComponent**.\n\n#### signature\n\n`(opts: object) =\u003e (component: Promise\u003cComponent\u003e | Component) =\u003e Component`\n\n#### params\n\n##### opts - **object**\n\nThe options. Same as properties of `AsyncComponent`.\n\n- *batch* - **bool** - `false`\n\n- *asyncJobs* - **[ func() : (Promise\\\u003cany\\\u003e | any) ]** - `[]`\n\n- *asyncProps* - **{ property: func( progressUpdater: ( func(number):void ) ) : (Promise\\\u003cany\u003e | any) }** - `{}`\n\n- *asyncPropOpts* - **{ property: { defaultProp: any } }** - `{}`\n\n- *asyncPropsMapper* - **func( props: { property: any } ):{ property: any }** - `props =\u003e props`\n\n- *errorComponent* - **Component** - `() =\u003e null`\n\n- *loadingComponent* - **Component** - `() =\u003e null`\n\n- *onError* - **func( error: any ) : void** - `() =\u003e null`\n\n- *delay* - **number** - `0`\n\n- *unwrapDefault* - **bool** - `true`\n\n- *reloadOnUpdate* - **bool** - `false`\n\n- *reloadDependents* - **{ property: any }** - `null`\n\n##### component - **Component | Promise\\\u003cComponent\u003e**\n\nA react component or a Promise return a react component. The wrapped component.\n\n#### return\n\nA high order component version of **AsyncComponent**.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvipcxj%2Freact-async-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvipcxj%2Freact-async-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvipcxj%2Freact-async-wrapper/lists"}