@loadable/component

loadable

Create a loadable component.

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))

options.resolveComponent

This is a function that receives the imported module (what the import() call resolves to) and the props, and returns the component.

The default value assumes that the component is exported as a default export. It can be customized to make a loadable component where the imported component is not the default export, or even where a different export is chosen depending on the props. For example:

// components.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],
})

Note: The default resolveComponent breaks Typescript type inference due to CommonJS compatibility. To avoid this, you can specify resolveComponent as (imported) => imported.default. This requires that the imported components have ES6/Harmony exports.

lazy

Create a loadable component "Suspense" ready.

import { lazy } from '@loadable/component'
const OtherComponent = lazy(() => import('./OtherComponent'))

LoadableComponent

A component created using loadable or lazy.

LoadableComponent.preload

Triggers the loading of a component.

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
OtherComponent.preload()

This method does not return a Promise intentionally. Use load if you need to wait for the component to be loaded.

LoadableComponent.load

Force the loading of a component synchronously, returns a Promise.

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
OtherComponent.load().then(() => {
  console.log('Component is loaded!')
})

If you don't need to know when the component will be loaded, you should use preload instead.

loadable.lib

Create a loadable library.

import loadable from '@loadable/component'
const Moment = loadable.lib(() => import('moment'))

lazy.lib

Create a loadable library "Suspense" ready.

import { lazy } from '@loadable/component'
const Moment = lazy.lib(() => import('moment'))

LoadableLibrary

A component created using loadable.lib or lazy.lib.

loadableReady

Wait for all loadable components to be loaded. This method must only be used with Server Side Rendering, see Server Side Rendering guide.

import { loadableReady } from '@loadable/component'
loadableReady(() => {
  const root = document.getElementById('main')
  hydrate(<App />, root)
})