• English

      • loadable

      Used to create Loadable component

      Usage

      import loadable from '@modern-js/runtime/loadable';

      Function Signature

      type Options = {
  resolveComponent?: (
    module: Module,
    props: Props,
  ) => React.ComponentType<Props>,
  fallback?: JSX.Element;
  ssr?: boolean;
}

function loadable(loadFn: Function, options?: Options) => LoadableComponent

      Input

      loadFn

      Used to load component.

      import loadable from '@modern-js/runtime/loadable';

const OtherComponent = loadable(() => import('./OtherComponent'));

      options.resolveComponent

      Type: (module: Module, props: Props) => React.ComponentType<Props>

      module is the component returned by loadFn, and props is the props parameter accepted by the component.

      By default, we think that the default export of file is a react component, so we can render the component directly. But when the component is named export, or we need to dynamically determine which component needs to be rendered according to the props, we can use resolveComponent. Here is an example:

      component.js
      export const Apple = () => 'Apple!';
export const Orange = () => 'Orange!';
      loadable.js
      const LoadableApple = loadable(() => import('./components'), {
  resolveComponent: components => components.Apple,
});
const LoadableOrange = loadable(() => import('./components'), {
  resolveComponent: components => components.Orange,
});
const LoadableFruit = loadable(() => import('./components'), {
  resolveComponent: (components, props) => components[props.fruit],
});

      options.fallback

      Whether to display fallback content during loading.

      options.ssr

      Whether to support SSR, the default value is true.

      Return Value

      LoadableComponent

      type LoadableComponent<Props> = React.ComponentType<
  Props & { fallback?: JSX.Element }
> & {
  preload(props?: Props): void;
  load(props?: Props): Promise<React.ComponentType<Props>>;
};