react-render-props-link-loader v1.2.0
react-render-props-link-loader
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.
Version notes
- 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.
Installation
npm install --save react-render-props-link-loaderExample
import * 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>
)API
LinkLoader
import LinkLoader from 'react-render-props-link-loader'href (required string)
The link URL.
onLoad (?() => any)
A callback that LinkLoader will call once the link has been loaded
onError (?(error: Error) => any)
A callback that LinkLoader will call if there was an error loading the
link
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 {
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>
)