How to use @loadable/component - 10 common examples

import loadable from "@loadable/component"

export const Home = loadable(() => import(/* other comment */ "./views/Home"))
export const About = loadable(() =>
  import(/* webpackChunkName: "About" */ "./views/About")
)
export const Contact = loadable(() =>
  import(/* webpackMode: "lazy" */ /* webpackFoo: "bar" */ "./views/Contact")
)

// Should allow passing fallback prop
    loading...} />;

    // Should allow preloading
    LazyComponent.preload();

    // Should allow force loading
    LazyComponent.load().then(Component => {
        ;
    });
}

// loadable.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LoadableDefaultLibrary = loadable.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LoadableLibrary = loadable.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback JSX element
    loadable.lib(importLibLoader, { fallback: <div>loading lib...</div> });

    // Should allow passing boolean to `ssr` in options
    loadable.lib(defaultImportComponentLoader, { ssr: true });

    // Should allow passing function to `cacheKey` in options
    loadable.lib(defaultImportComponentLoader, { cacheKey: props =&gt; props.foo });

    // Should allow passing fallback prop

;
    });
}

// loadable.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LoadableDefaultLibrary = loadable.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LoadableLibrary = loadable.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback JSX element
    loadable.lib(importLibLoader, { fallback: <div>loading lib...</div> });

    // Should allow passing boolean to `ssr` in options
    loadable.lib(defaultImportComponentLoader, { ssr: true });

    // Should allow passing function to `cacheKey` in options
    loadable.lib(defaultImportComponentLoader, { cacheKey: props =&gt; props.foo });

    // Should allow passing fallback prop
    Loading library...}&gt;{({ getTestObj }) =&gt; getTestObj().foo};

    // Should reflect inferred types from module in ref
    const ref = React.createRef();
    ;
    ref.current!.getTestObj().foo;

    // Should allow preloading

// loadable.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LoadableDefaultLibrary = loadable.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LoadableLibrary = loadable.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback JSX element
    loadable.lib(importLibLoader, { fallback: <div>loading lib...</div> });

    // Should allow passing boolean to `ssr` in options
    loadable.lib(defaultImportComponentLoader, { ssr: true });

    // Should allow passing function to `cacheKey` in options
    loadable.lib(defaultImportComponentLoader, { cacheKey: props =&gt; props.foo });

    // Should allow passing fallback prop
    Loading library...}&gt;{({ getTestObj }) =&gt; getTestObj().foo};

    // Should reflect inferred types from module in ref
    const ref = React.createRef();
    ;
    ref.current!.getTestObj().foo;

    // Should allow preloading
    LoadableLibrary.preload();

    // Should allow force loading

LazyComponent.preload();

    // Should allow force loading
    LazyComponent.load().then(Component => {
        ;
    });
}

// loadable.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LoadableDefaultLibrary = loadable.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LoadableLibrary = loadable.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback JSX element
    loadable.lib(importLibLoader, { fallback: <div>loading lib...</div> });

    // Should allow passing boolean to `ssr` in options
    loadable.lib(defaultImportComponentLoader, { ssr: true });

    // Should allow passing function to `cacheKey` in options
    loadable.lib(defaultImportComponentLoader, { cacheKey: props =&gt; props.foo });

    // Should allow passing fallback prop
    Loading library...}&gt;{({ getTestObj }) =&gt; getTestObj().foo};

    // Should reflect inferred types from module in ref
    const ref = React.createRef();

// Should allow preloading
    LazyDefaultLibrary.preload();

    // Should allow force loading
    LazyDefaultLibrary.load().then(Component => {
        ;
    });
}

// loadableReady
{
    // Should allow passing callback argument
    loadableReady(() => {});

    // Should return a promise
    loadableReady().then(() => {});

    // Should allow passing options with namespace
    loadableReady(() => {}, { namespace: 'foo' });
}

LoadableComponent.preload();

    // Should allow force loading
    LoadableComponent.load().then(Component => {
        ;
    });
}

// lazy
{
    // Should infer props from imported component with default export
    const LazyDefaultComponent = lazy(defaultImportComponentLoader);
    ;

    // Should infer props from imported component without default export
    const LazyComponent = lazy(importComponentLoader);
    ;

    // Should allow passing fallback prop
    loading...} />;

    // Should allow preloading
    LazyComponent.preload();

    // Should allow force loading
    LazyComponent.load().then(Component => {
        ;
    });
}

// loadable.lib
{

// Should allow passing `fallback` prop to loadable component
    loading...} />;

    // Should allow preloading
    LoadableComponent.preload();

    // Should allow force loading
    LoadableComponent.load().then(Component => {
        ;
    });
}

// lazy
{
    // Should infer props from imported component with default export
    const LazyDefaultComponent = lazy(defaultImportComponentLoader);
    ;

    // Should infer props from imported component without default export
    const LazyComponent = lazy(importComponentLoader);
    ;

    // Should allow passing fallback prop
    loading...} />;

    // Should allow preloading
    LazyComponent.preload();

    // Should allow force loading
    LazyComponent.load().then(Component => {
        ;
    });

LoadableLibrary.preload();

    // Should allow force loading
    LoadableLibrary.load().then(Component => {
        ;
    });
}

// lazy.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LazyDefaultLibrary = lazy.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LazyLibrary = lazy.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback prop
    Loading library...}>{({ getTestObj }) => getTestObj().foo};

    // Should reflect inferred types from module in ref
    const ref = React.createRef();
    ;
    ref.current!.getTestObj().foo;

    // Should allow preloading
    LazyDefaultLibrary.preload();

    // Should allow force loading
    LazyDefaultLibrary.load().then(Component => {
        ;

;
    ref.current!.getTestObj().foo;

    // Should allow preloading
    LoadableLibrary.preload();

    // Should allow force loading
    LoadableLibrary.load().then(Component => {
        ;
    });
}

// lazy.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LazyDefaultLibrary = lazy.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LazyLibrary = lazy.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback prop
    Loading library...}>{({ getTestObj }) => getTestObj().foo};

    // Should reflect inferred types from module in ref
    const ref = React.createRef();
    ;
    ref.current!.getTestObj().foo;

    // Should allow preloading
    LazyDefaultLibrary.preload();