an easier to use dynamic link loader with a render prop
This is useful if you want to wait to load web fonts or other static CSS until
the user navigates to a view that uses it. When you mount a <LinkLoader>
component, it will create the link tag you've requested.
<LinkLoader> doesn't load a given link URL more than once, even if there
is a pre-existing <link> tag for that URL that it didn't create. If the href
prop changes, it will load that new URL.
- supports React 15 or 16
- if building for legacy browsers with a bundler like Webpack that supports the
modulefield ofpackage.json, you will probably need to add a rule to transpile this package.
npm install --save react-render-props-link-loaderimport * as React from 'react'
import LinkLoader from 'react-render-props-link-loader'
import SomeView from './SomeView'
export const SomeViewContainer = (props) => (
<LinkLoader
href="https://fonts.googleapis.com/css?family=Rubik:300,400,500"
rel="stylesheet"
onLoad={() => console.log('loaded fonts!')}
onError={(error) => console.error('failed to load fonts', error.stack)}
>
{({ loading, error }) => {
if (loading) return <h3>Loading fonts...</h3>
if (error) return <h3>Failed to load fonts: {error.message}</h3>
return <SomeView {...props} />
}}
</LinkLoader>
)import LinkLoader from 'react-render-props-link-loader'The link URL.
A callback that LinkLoader will call once the link has been loaded
A callback that LinkLoader will call if there was an error loading the
link
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>,
}import {
LinksRegistry,
LinksRegistryContext,
} from 'react-render-props-link-loader'On the server, create an instance of LinksRegistry and put it on the app's
context:
const registry = new LinksRegistry()
const body = ReactDOM.renderToString(
<LinksRegistryContext.Provider value={registry}>
<App />
</LinksRegistryContext.Provider>
)Then render registry.linkTags() in your head element:
const html = (
<html className="default">
<head>
...
{registry.linkTags()}
</head>
...
</html>
)