@types/react-loadable

  • Version 5.5.5
  • Published
  • 11.2 kB
  • 2 dependencies
  • MIT license

Install

npm i @types/react-loadable
yarn add @types/react-loadable
pnpm add @types/react-loadable

Overview

TypeScript definitions for react-loadable

Index

Variables

variable LoadableExport

const LoadableExport: LoadableExport.Loadable;

    Namespaces

    namespace LoadableExport

    namespace LoadableExport {}

      interface CommonOptions

      interface CommonOptions {}

        property delay

        delay?: number | false | null;
        • 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[];
        • 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;
        • 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>;
        • 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')],
          });

        interface Loadable

        interface Loadable {}

          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;

                interface LoadableCaptureProps

                interface LoadableCaptureProps {}

                  property report

                  report: (moduleName: string) => void;
                  • Function called for every moduleName that is rendered via React Loadable.

                  interface LoadableComponent

                  interface LoadableComponent {}

                    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.

                    interface LoadingComponentProps

                    interface LoadingComponentProps {}

                      property error

                      error: any;

                        property isLoading

                        isLoading: boolean;

                          property pastDelay

                          pastDelay: boolean;

                            property retry

                            retry: () => void;

                              property timedOut

                              timedOut: boolean;

                                interface OptionsWithMap

                                interface OptionsWithMap<Props, Exports extends { [key: string]: any }>
                                extends CommonOptions {}

                                  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) => any;
                                  • 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} />
                                    }
                                    });

                                  interface OptionsWithoutRender

                                  interface OptionsWithoutRender<Props> extends CommonOptions {}

                                    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.

                                    interface OptionsWithRender

                                    interface OptionsWithRender<Props, Exports extends object> extends CommonOptions {}

                                      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) => any;
                                      • 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} />
                                        }
                                        });

                                      type Options

                                      type Options<Props, Exports extends object> =
                                      | OptionsWithoutRender<Props>
                                      | OptionsWithRender<Props, Exports>;

                                        namespace react-loadable

                                        module 'react-loadable' {}

                                          variable LoadableExport

                                          const LoadableExport: LoadableExport.Loadable;

                                            interface CommonOptions

                                            interface CommonOptions {}

                                              property delay

                                              delay?: number | false | null;
                                              • 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[];
                                              • 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;
                                              • 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>;
                                              • 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')],
                                                });

                                              interface Loadable

                                              interface Loadable {}

                                                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;

                                                      interface LoadableCaptureProps

                                                      interface LoadableCaptureProps {}

                                                        property report

                                                        report: (moduleName: string) => void;
                                                        • Function called for every moduleName that is rendered via React Loadable.

                                                        interface LoadableComponent

                                                        interface LoadableComponent {}

                                                          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.

                                                          interface LoadingComponentProps

                                                          interface LoadingComponentProps {}

                                                            property error

                                                            error: any;

                                                              property isLoading

                                                              isLoading: boolean;

                                                                property pastDelay

                                                                pastDelay: boolean;

                                                                  property retry

                                                                  retry: () => void;

                                                                    property timedOut

                                                                    timedOut: boolean;

                                                                      interface OptionsWithMap

                                                                      interface OptionsWithMap<Props, Exports extends { [key: string]: any }>
                                                                      extends CommonOptions {}

                                                                        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) => any;
                                                                        • 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} />
                                                                          }
                                                                          });

                                                                        interface OptionsWithoutRender

                                                                        interface OptionsWithoutRender<Props> extends CommonOptions {}

                                                                          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.

                                                                          interface OptionsWithRender

                                                                          interface OptionsWithRender<Props, Exports extends object> extends CommonOptions {}

                                                                            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) => any;
                                                                            • 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} />
                                                                              }
                                                                              });

                                                                            type Options

                                                                            type Options<Props, Exports extends object> =
                                                                            | OptionsWithoutRender<Props>
                                                                            | OptionsWithRender<Props, Exports>;

                                                                              Package Files (1)

                                                                              Dependencies (2)

                                                                              Dev Dependencies (0)

                                                                              No dev dependencies.

                                                                              Peer Dependencies (0)

                                                                              No peer dependencies.

                                                                              Badge

                                                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/react-loadable.

                                                                              • Markdown
                                                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/react-loadable)
                                                                              • HTML
                                                                                <a href="https://www.jsdocs.io/package/@types/react-loadable"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>