Package Exports

react-render-props-script-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-render-props-script-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-render-props-script-loader

an easier to use dynamic script loader with a render prop

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 <ScriptLoader> component, it will create the script tag you've requested.

<ScriptLoader> doesn't load a given script URL more than once, even if there is a pre-existing <script> tag for that URL that it didn't create. If src prop changes, it will load that new URL.

Version notes

supports React 15 or 16
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.

Installation

npm install --save react-render-props-script-loader

Example

import * as React from 'react'
import ScriptLoader from 'react-render-props-script-loader'

import MapView from './MapView'

export const MapViewContainer = props => (
  <ScriptLoader
    type="text/javascript"
    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 <h3>Loading Google Maps API...</h3>
      if (error) return <h3>Failed to load Google Maps API: {error.message}</h3>
      return <MapView {...props} />
    }}
  </ScriptLoader>
)

API

`ScriptLoader`

import ScriptLoader from 'react-render-props-script-loader'

`src` (required `string`)

The script URL.

`onLoad` (`?() => any`)

A callback that ScriptLoader will call once the script has been loaded

`onError` (`?(error: Error) => any`)

A callback that ScriptLoader will call if there was an error loading the script

`children` (`?(state: State) => ?React.Node`)

The render function. It will be called with an object having the following props, and may return your desired content to display:

{
  loading: boolean,
  loaded: boolean,
  error: ?Error,
  promise: ?Promise<any>,
}

Server-Side Rendering

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:

const registry = new ScriptsRegistry()

const body = ReactDOM.renderToString(
  <ScriptsRegistryContext.Provider value={registry}>
    <App />
  </ScriptsRegistryContext.Provider>
)

Then render registry.scriptTags() in your head element:

const html = (
  <html className="default">
    <head>
      ...
      {registry.scriptTags()}
    </head>
    ...
  </html>
)