{"id":22382444,"url":"https://github.com/jcoreio/react-render-props-script-loader","last_synced_at":"2025-07-31T03:31:50.690Z","repository":{"id":57343469,"uuid":"144217036","full_name":"jcoreio/react-render-props-script-loader","owner":"jcoreio","description":"an easier to use React dynamic script loader with a render prop and SSR","archived":false,"fork":false,"pushed_at":"2024-03-26T22:41:29.000Z","size":1750,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-07T13:07:04.200Z","etag":null,"topics":["dynamic-script","loader","react","script","script-tag"],"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/jcoreio.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-08-10T00:29:22.000Z","updated_at":"2023-03-13T21:09:37.000Z","dependencies_parsed_at":"2024-02-01T22:01:55.693Z","dependency_job_id":"12f0e501-8d7f-4c0d-9645-ea126fca0d43","html_url":"https://github.com/jcoreio/react-render-props-script-loader","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-render-props-script-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-render-props-script-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-render-props-script-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-render-props-script-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcoreio","download_url":"https://codeload.github.com/jcoreio/react-render-props-script-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228209939,"owners_count":17885595,"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":["dynamic-script","loader","react","script","script-tag"],"created_at":"2024-12-05T00:13:02.917Z","updated_at":"2024-12-05T00:13:03.693Z","avatar_url":"https://github.com/jcoreio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-render-props-script-loader\n\n[![CircleCI](https://circleci.com/gh/jcoreio/react-render-props-script-loader.svg?style=svg)](https://circleci.com/gh/jcoreio/react-render-props-script-loader)\n[![Coverage Status](https://codecov.io/gh/jcoreio/react-render-props-script-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/jcoreio/react-render-props-script-loader)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![npm version](https://badge.fury.io/js/react-library-skeleton.svg)](https://badge.fury.io/js/react-library-skeleton)\n\nan easier to use dynamic script loader with a [render prop](https://reactjs.org/docs/render-props.html)\nand now a React custom hook.\n\nThis is useful if you want to wait to load the Google Maps API until the user\nnavigates to a view that uses it. When you mount a `\u003cScriptLoader\u003e` component,\nit will create the script tag you've requested.\n\n`\u003cScriptLoader\u003e` doesn't load a given script URL more than once, even if there\nis a pre-existing `\u003cscript\u003e` tag for that URL that it didn't create. If `src`\nprop changes, it will load that new URL.\n\n# Version notes\n\n- if building for legacy browsers with a bundler like Webpack that supports the\n  `module` field of `package.json`, you will probably need to add a rule to\n  transpile this package.\n\n# Installation\n\n```sh\nnpm install --save react-render-props-script-loader\n```\n\n# Example\n\n```js\nimport * as React from 'react'\nimport ScriptLoader from 'react-render-props-script-loader'\n\nimport MapView from './MapView'\n\nexport const MapViewContainer = (props) =\u003e (\n  \u003cScriptLoader\n    type=\"text/javascript\"\n    src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY\u0026libraries=places\"\n    onLoad={() =\u003e console.log('loaded google maps!')}\n    onError={(error) =\u003e\n      console.error('failed to load google maps:', error.stack)\n    }\n  \u003e\n    {({ loading, error }) =\u003e {\n      if (loading) return \u003ch3\u003eLoading Google Maps API...\u003c/h3\u003e\n      if (error) return \u003ch3\u003eFailed to load Google Maps API: {error.message}\u003c/h3\u003e\n      return \u003cMapView {...props} /\u003e\n    }}\n  \u003c/ScriptLoader\u003e\n)\n```\n\n# API\n\n## `useScript(props: Props)`\n\n```js\nimport { useScript } from 'react-render-props-script-loader'\n```\n\n### `props.src` (**required** `string`)\n\nThe script URL.\n\n### `props.onLoad` (`?() =\u003e any`)\n\nA callback that `ScriptLoader` will call once the script has been loaded\n\n### `props.onError` (`?(error: Error) =\u003e any`)\n\nA callback that `ScriptLoader` will call if there was an error loading the\nscript\n\n### Returns\n\nA state object of the following type:\n\n```ts\ntype State = {\n  loading: boolean\n  loaded: boolean\n  error: ?Error\n  promise: ?Promise\u003cany\u003e\n}\n```\n\n## `ScriptLoader`\n\n```js\nimport ScriptLoader from 'react-render-props-script-loader'\n```\n\n### `src` (**required** `string`)\n\nThe script URL.\n\n### `onLoad` (`?() =\u003e any`)\n\nA callback that `ScriptLoader` will call once the script has been loaded\n\n### `onError` (`?(error: Error) =\u003e any`)\n\nA callback that `ScriptLoader` will call if there was an error loading the\nscript\n\n### `children` (`?(state: State) =\u003e ?React.Node`)\n\nThe render function. It will be called with an object having the following\nprops, and may return your desired content to display:\n\n```js\n{\n  loading: boolean,\n  loaded: boolean,\n  error: ?Error,\n  promise: ?Promise\u003cany\u003e,\n}\n```\n\n## Server-Side Rendering\n\n```js\nimport {\n  ScriptsRegistry,\n  ScriptsRegistryContext,\n} from 'react-render-props-script-loader'\n```\n\nOn the server, create an instance of `ScriptsRegistry` and put it on the app's\ncontext:\n\n```js\nconst registry = new ScriptsRegistry()\n\nconst body = ReactDOM.renderToString(\n  \u003cScriptsRegistryContext.Provider value={registry}\u003e\n    \u003cApp /\u003e\n  \u003c/ScriptsRegistryContext.Provider\u003e\n)\n```\n\nThen render `registry.scriptTags()` in your head element:\n\n```js\nconst html = (\n  \u003chtml className=\"default\"\u003e\n    \u003chead\u003e\n      ...\n      {registry.scriptTags()}\n    \u003c/head\u003e\n    ...\n  \u003c/html\u003e\n)\n```\n\n## Content Security Policy\n\nMake sure your header includes this meta tag:\n\n```jsx\n\u003cmeta property=\"csp-nonce\" content={nonce} /\u003e\n```\n\nAnd in SSR, pass the `nonce` to `registry.scriptTags({ nonce })`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-render-props-script-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcoreio%2Freact-render-props-script-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-render-props-script-loader/lists"}