{"id":17142444,"url":"https://github.com/dozoisch/react-async-script","last_synced_at":"2025-05-16T18:05:34.365Z","repository":{"id":30294062,"uuid":"33845709","full_name":"dozoisch/react-async-script","owner":"dozoisch","description":"A React composition mixin for loading 3rd party scripts asynchronously","archived":false,"fork":false,"pushed_at":"2023-01-08T14:01:04.000Z","size":1159,"stargazers_count":177,"open_issues_count":6,"forks_count":29,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-16T18:03:54.776Z","etag":null,"topics":["hacktoberfest","hacktoberfest2020","javascript","reactjs"],"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/dozoisch.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-13T03:24:57.000Z","updated_at":"2024-09-05T15:39:37.000Z","dependencies_parsed_at":"2023-01-14T16:42:14.150Z","dependency_job_id":null,"html_url":"https://github.com/dozoisch/react-async-script","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dozoisch%2Freact-async-script","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dozoisch%2Freact-async-script/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dozoisch%2Freact-async-script/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dozoisch%2Freact-async-script/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dozoisch","download_url":"https://codeload.github.com/dozoisch/react-async-script/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582903,"owners_count":22095518,"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","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":["hacktoberfest","hacktoberfest2020","javascript","reactjs"],"created_at":"2024-10-14T20:31:12.670Z","updated_at":"2025-05-16T18:05:34.337Z","avatar_url":"https://github.com/dozoisch.png","language":"JavaScript","readme":"# React Async Script Loader\n\n[![Build Status][ci.img]][ci.url] [![npm version][npm.img]][npm.url] [![npm downloads][npm.dl.img]][npm.dl.url]\n\nA React HOC for loading 3rd party scripts asynchronously. This HOC allows you to wrap a component that needs 3rd party resources, like reCAPTCHA or Google Maps, and have them load the script asynchronously.\n\n## Usage\n\n#### Async Script HOC api\n\n`makeAsyncScriptLoader(getScriptUrl, options)(Component)`\n\n- `Component`: The *Component* to wrap.\n- `getScriptUrl`: *string* or *function* that returns the full URL of the script tag.\n- `options` *(optional)*:\n    - `attributes`: *object* : If the script needs attributes (such as `data-` attributes), then provide them as key/value pairs of strings and they will be added to the generated script tag.\n    - `callbackName`: *string* : If the script needs to call a global function when finished loading *(for example: `recaptcha/api.js?onload=callbackName`)*. Please provide the callback name here and it will be autoregistered on `window` for you.\n    - `globalName`: *string* : Can provide the name of the global that the script attaches to `window`. Async-script will pass this as a prop to the wrapped component. *(`props[globalName] = window[globalName]`)*\n    - `removeOnUnmount`: *boolean* **default=false** : If set to `true` removes the script tag when component unmounts.\n    - `scriptId`: *string* : If set, it adds the following id on the script tag.\n\n#### HOC Component props\n```js\nconst AsyncScriptComponent = makeAsyncScriptLoader(URL)(Component);\n// ---\n\u003cAsyncScriptComponent asyncScriptOnLoad={callAfterScriptLoads} /\u003e\n```\n- `asyncScriptOnLoad`: *function* : called after script finishes loading. *using `script.onload`*\n\n\n#### Ref and forwardRef\n\n`react-async-script` uses react's `forwardRef` method to pass along the `ref` applied to the wrapped component.\n\nIf you pass a `ref` prop you'll have access to your wrapped components instance. See the tests for detailed example.\n\nSimple Example:\n```js\nconst AsyncHoc = makeAsyncScriptLoader(URL)(ComponentNeedsScript);\n\nclass DisplayComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this._internalRef = React.createRef();\n  }\n  componentDidMount() {\n    console.log(\"ComponentNeedsScript's Instance -\", this._internalRef.current);\n  }\n  render() { return (\u003cAsyncHoc ref={this._internalRef} /\u003e)}\n}\n```\n\n##### Notes on Requirements\n\nAt least `React@16.4.1` is required due to `forwardRef` usage internally.\n\n\n### Example\n\nSee https://github.com/dozoisch/react-google-recaptcha\n\n```js\n// recaptcha.js\nexport class ReCAPTCHA extends React.Component {\n  componentDidUpdate(prevProps) {\n    // recaptcha has loaded via async script\n    if (!prevProps.grecaptcha \u0026\u0026 this.props.grecaptcha) {\n      this.props.grecaptcha.render(this._container)\n    }\n  }\n  render() { return (\n    \u003cdiv ref={(r) =\u003e this._container = r} /\u003e)\n  }\n}\n\n// recaptcha-wrapper.js\nimport makeAsyncScriptLoader from \"react-async-script\";\nimport { ReCAPTCHA } from \"./recaptcha\";\n\nconst callbackName = \"onloadcallback\";\nconst URL = `https://www.google.com/recaptcha/api.js?onload=${callbackName}\u0026render=explicit`;\n// the name of the global that recaptcha/api.js sets on window ie: window.grecaptcha\nconst globalName = \"grecaptcha\";\n\nexport default makeAsyncScriptLoader(URL, {\n  callbackName: callbackName,\n  globalName: globalName,\n})(ReCAPTCHA);\n\n// main.js\nimport ReCAPTCHAWrapper from \"./recaptcha-wrapper.js\"\n\nconst onLoad = () =\u003e console.log(\"script loaded\")\n\nReact.render(\n  \u003cReCAPTCHAWrapper asyncScriptOnLoad={onLoad} /\u003e,\n  document.body\n);\n```\n\n---\n\n[ci.img]: https://github.com/dozoisch/react-async-script/actions/workflows/standard-ci.yml/badge.svg?branch=master\n[ci.url]: https://github.com/dozoisch/react-async-script/actions/workflows/standard-ci.yml\n[npm.img]: https://badge.fury.io/js/react-async-script.svg\n[npm.url]: http://badge.fury.io/js/react-async-script\n[npm.dl.img]: https://img.shields.io/npm/dm/react-async-script.svg\n[npm.dl.url]: https://www.npmjs.com/package/react-async-script\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdozoisch%2Freact-async-script","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdozoisch%2Freact-async-script","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdozoisch%2Freact-async-script/lists"}