@types/react-loadable

property delay

delay?: number | false | null | undefined;

• Defaults to 200, in milliseconds.

  Only show the loading component if the loader() has taken this long to succeed or error.

property loading

loading: React.ComponentType<LoadingComponentProps>;

• React component displayed after delay until loader() succeeds. Also responsible for displaying errors.

  If you don't want to render anything you can pass a function that returns null (this is considered a valid React component).

property modules

modules?: string[] | undefined;

• Optional array of module paths that Loadable.Capture's report function will be applied on during server-side rendering. This helps the server know which modules were imported/used during SSR.

  Loadable({
    loader: () => import('./my-component'),
    modules: ['./my-component'],
  });

property timeout

timeout?: number | false | null | undefined;

• Disabled by default.

  After the specified time in milliseconds passes, the component's timedOut prop will be set to true.

property webpack

webpack?: (() => Array<string | number>) | undefined;

• An optional function which returns an array of Webpack module ids which you can get with require.resolveWeak. This is used by the client (inside Loadable.preloadReady) to guarantee each webpack module is preloaded before the first client render.

  Loadable({
   loader: () => import('./Foo'),
   webpack: () => [require.resolveWeak('./Foo')],
  });

property Capture

Capture: React.ComponentType<LoadableCaptureProps>;

method Map

Map: <Props, Exports extends { [key: string]: any }>(
    options: OptionsWithMap<Props, Exports>
) => React.ComponentType<Props> & LoadableComponent;

method preloadAll

preloadAll: () => Promise<void>;

• This will call all of the LoadableComponent.preload methods recursively until they are all resolved. Allowing you to preload all of your dynamic modules in environments like the server.

  Loadable.preloadAll().then(() => {
    app.listen(3000, () => {
      console.log('Running on http://localhost:3000/');
    });
  });

method preloadReady

preloadReady: () => Promise<void>;

• Check for modules that are already loaded in the browser and call the matching LoadableComponent.preload methods.

  window.main = () => {
    Loadable.preloadReady().then(() => {
      ReactDOM.hydrate(
        <App/>,
        document.getElementById('app'),
      );
    });
  };

call signature

<Props, Exports extends object>(
    options: Options<Props, Exports>
): React.ComponentType<Props> & LoadableComponent;

property report

report: (moduleName: string) => void;

• Function called for every moduleName that is rendered via React Loadable.

method preload

preload: () => void;

• The generated component has a static method preload() for calling the loader function ahead of time. This is useful for scenarios where you think the user might do something next and want to load the next component eagerly.

  Note: preload() intentionally does not return a promise. You should not be depending on the timing of preload(). It's meant as a performance optimization, not for creating UI logic.

property error

error: any;

property isLoading

isLoading: boolean;

property pastDelay

pastDelay: boolean;

property retry

retry: () => void;

property timedOut

timedOut: boolean;

property loader

loader: {
    [P in keyof Exports]: () => Promise<Exports[P]>;
};

• An object containing functions which return promises, which resolve to an object to be passed to render on success.

method render

render: (loaded: Exports, props: Props) => React.ReactNode;

• If you want to customize what gets rendered from your loader you can also pass render.

  Note: If you want to load multiple resources at once, you can also use Loadable.Map.

  Loadable({
      // ...
      render(loaded, props) {
          const Component = loaded.default;
          return <Component {...props} />
      }
  });

method loader

loader: () => Promise<
    React.ComponentType<Props> | { default: React.ComponentType<Props> }
>;

• Function returning a promise which returns a React component displayed on success.

  Resulting React component receives all the props passed to the generated component.

method loader

loader: () => Promise<Exports>;

• Function returning a promise which returns an object to be passed to render on success.

method render

render: (loaded: Exports, props: Props) => React.ReactNode;

• If you want to customize what gets rendered from your loader you can also pass render.

  Note: If you want to load multiple resources at once, you can also use Loadable.Map.

  Loadable({
      // ...
      render(loaded, props) {
          const Component = loaded.default;
          return <Component {...props} />
      }
  });

property delay

delay?: number | false | null | undefined;

• Defaults to 200, in milliseconds.

  Only show the loading component if the loader() has taken this long to succeed or error.

property loading

loading: React.ComponentType<LoadingComponentProps>;

• React component displayed after delay until loader() succeeds. Also responsible for displaying errors.

  If you don't want to render anything you can pass a function that returns null (this is considered a valid React component).

property modules

modules?: string[] | undefined;

• Optional array of module paths that Loadable.Capture's report function will be applied on during server-side rendering. This helps the server know which modules were imported/used during SSR.

  Loadable({
    loader: () => import('./my-component'),
    modules: ['./my-component'],
  });

property timeout

timeout?: number | false | null | undefined;

• Disabled by default.

  After the specified time in milliseconds passes, the component's timedOut prop will be set to true.

property webpack

webpack?: (() => Array<string | number>) | undefined;

• An optional function which returns an array of Webpack module ids which you can get with require.resolveWeak. This is used by the client (inside Loadable.preloadReady) to guarantee each webpack module is preloaded before the first client render.

  Loadable({
   loader: () => import('./Foo'),
   webpack: () => [require.resolveWeak('./Foo')],
  });

property Capture

Capture: React.ComponentType<LoadableCaptureProps>;

method Map

Map: <Props, Exports extends { [key: string]: any }>(
    options: OptionsWithMap<Props, Exports>
) => React.ComponentType<Props> & LoadableComponent;

method preloadAll

preloadAll: () => Promise<void>;

• This will call all of the LoadableComponent.preload methods recursively until they are all resolved. Allowing you to preload all of your dynamic modules in environments like the server.

  Loadable.preloadAll().then(() => {
    app.listen(3000, () => {
      console.log('Running on http://localhost:3000/');
    });
  });

method preloadReady

preloadReady: () => Promise<void>;

• Check for modules that are already loaded in the browser and call the matching LoadableComponent.preload methods.

  window.main = () => {
    Loadable.preloadReady().then(() => {
      ReactDOM.hydrate(
        <App/>,
        document.getElementById('app'),
      );
    });
  };

call signature

<Props, Exports extends object>(
    options: Options<Props, Exports>
): React.ComponentType<Props> & LoadableComponent;

property report

report: (moduleName: string) => void;

• Function called for every moduleName that is rendered via React Loadable.

method preload

preload: () => void;

• The generated component has a static method preload() for calling the loader function ahead of time. This is useful for scenarios where you think the user might do something next and want to load the next component eagerly.

  Note: preload() intentionally does not return a promise. You should not be depending on the timing of preload(). It's meant as a performance optimization, not for creating UI logic.

property error

error: any;

property isLoading

isLoading: boolean;

property pastDelay

pastDelay: boolean;

property retry

retry: () => void;

property timedOut

timedOut: boolean;

property loader

loader: {
    [P in keyof Exports]: () => Promise<Exports[P]>;
};

• An object containing functions which return promises, which resolve to an object to be passed to render on success.

method render

render: (loaded: Exports, props: Props) => React.ReactNode;

• If you want to customize what gets rendered from your loader you can also pass render.

  Note: If you want to load multiple resources at once, you can also use Loadable.Map.

  Loadable({
      // ...
      render(loaded, props) {
          const Component = loaded.default;
          return <Component {...props} />
      }
  });

method loader

loader: () => Promise<
    React.ComponentType<Props> | { default: React.ComponentType<Props> }
>;

• Function returning a promise which returns a React component displayed on success.

  Resulting React component receives all the props passed to the generated component.

method loader

loader: () => Promise<Exports>;

• Function returning a promise which returns an object to be passed to render on success.

method render

render: (loaded: Exports, props: Props) => React.ReactNode;

• If you want to customize what gets rendered from your loader you can also pass render.

  Note: If you want to load multiple resources at once, you can also use Loadable.Map.

  Loadable({
      // ...
      render(loaded, props) {
          const Component = loaded.default;
          return <Component {...props} />
      }
  });