an easier to use dynamic script loader
npm install react-render-props-script-loader



an easier to use dynamic script loader with a render prop
and now a React custom hook.
This is useful if you want to wait to load the Google Maps API until the user
navigates to a view that uses it. When you mount a component,
it will create the script tag you've requested.
doesn't load a given script URL more than once, even if there
is a pre-existing tag for that URL that it didn't create. If src
prop changes, it will load that new URL.
- if building for legacy browsers with a bundler like Webpack that supports the
module field of package.json, you will probably need to add a rule to
transpile this package.
``sh`
npm install --save react-render-props-script-loader
`js
import * as React from 'react'
import ScriptLoader from 'react-render-props-script-loader'
import MapView from './MapView'
export const MapViewContainer = (props) => (
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"
onLoad={() => console.log('loaded google maps!')}
onError={(error) =>
console.error('failed to load google maps:', error.stack)
}
>
{({ loading, error }) => {
if (loading) return
API
useScript(props: Props)`js
import { useScript } from 'react-render-props-script-loader'
`$3
The script URL.
$3
A callback that
ScriptLoader will call once the script has been loaded$3
A callback that
ScriptLoader will call if there was an error loading the
script$3
A state object of the following type:
`ts
type State = {
loading: boolean
loaded: boolean
error: ?Error
promise: ?Promise
}
`ScriptLoader`js
import ScriptLoader from 'react-render-props-script-loader'
`$3
The script URL.
$3
A callback that
ScriptLoader will call once the script has been loaded$3
A callback that
ScriptLoader will call if there was an error loading the
script$3
The render function. It will be called with an object having the following
props, and may return your desired content to display:
`js
{
loading: boolean,
loaded: boolean,
error: ?Error,
promise: ?Promise,
}
`Server-Side Rendering
`js
import {
ScriptsRegistry,
ScriptsRegistryContext,
} from 'react-render-props-script-loader'
`On the server, create an instance of
ScriptsRegistry and put it on the app's
context:`js
const registry = new ScriptsRegistry()const body = ReactDOM.renderToString(
)
`Then render
registry.scriptTags() in your head element:`js
const html = (
...
{registry.scriptTags()}
...
)
`Content Security Policy
Make sure your header includes this meta tag:
`jsx
`And in SSR, pass the
nonce to registry.scriptTags({ nonce })`.