JSPM – react-lazy-with-preload@1.0.0

Package Exports

react-lazy-with-preload

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-lazy-with-preload) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-lazy-with-preload wraps the React.lazy() API and adds the ability to preload the component before it is rendered for the first time.

Install

npm install react-lazy-with-preload

Usage

Before:

import { lazy, Suspense } from "react";
const OtherComponent = lazy(() => import("./OtherComponent"));

After:

import { Suspense } from "react";
import lazy from "react-lazy-with-preload";
const OtherComponent = lazy(() => import("./OtherComponent"));

// ...
OtherComponent.preload();

To preload a component before it is rendered for the first time, the component that is returned from lazy() has a preload function attached that you can invoke. preload() returns a Promise that you can wait on if needed. The promise is idempotent, meaning that preload() will return the same Promise instance if called multiple times.

For more information about React code-splitting, React.lazy and React.Suspense, see https://reactjs.org/docs/code-splitting.html.

Example

For example, if you need to load a component when a button is pressed, you could start preloading the component when the user hovers over the button:

function SomeComponent() {
    const { showOtherComponent, setShowOtherComponent } = useState(false);

    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                {showOtherComponent && <OtherComponent />}
            </Suspense>
            <button
                onClick={() => setShowOtherComponent(true)}
                // This component will be needed soon. Let's preload it!
                onMouseOver={() => OtherComponent.preload()}
            >
                Click me to render OtherComponent
            </button>
        </div>
    );
}

Acknowledgements

Inspired by the preload behavior of react-loadable.