-
- {({ default: moment }) => moment(date).fromNow()}
-
-
- )
-}
-```
-
-You can also use a `ref`, populated when the library is loaded.
-
-```js
-import loadable from '@loadable/component'
-
-const Moment = loadable.lib(() => import('moment'))
-
-class MyComponent {
- moment = React.createRef()
-
- handleClick = () => {
- if (this.moment.current) {
- return alert(this.moment.current.default.format('HH:mm'))
- }
- }
-
- render() {
- return (
-
-
-
-
- )
- }
-}
-```
-
-> You can also pass a function to `ref`, called when the library is loaded.
-
-### Full dynamic import
-
-Webpack accepts [full dynamic imports](https://webpack.js.org/api/module-methods/#import-), you can use them to create a reusable Loadable Component.
-
-```js
-import loadable from '@loadable/component'
-
-const AsyncPage = loadable(props => import(`./${props.page}`))
-
-function MyComponent() {
- return (
-
}>
-
-
-
- )
-}
-```
-
-> Use `lazy.lib` for libraries.
-
-> ⚠️ Suspense is not yet available for server-side rendering.
-
-### Fallback without Suspense
-
-You can specify a `fallback` in `loadable` options.
-
-```js
-const OtherComponent = loadable(() => import('./OtherComponent'), {
- fallback:
Loading...
,
-})
-
-function MyComponent() {
- return (
-
-
-
- )
-}
-```
-
-You can also specify a `fallback` in props:
-
-```js
-const OtherComponent = loadable(() => import('./OtherComponent'))
-
-function MyComponent() {
- return (
-
- Loading...
} />
-
- )
-}
-```
-
-### Error boundaries
-
-If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](https://reactjs.org/docs/error-boundaries.html). Once you’ve created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there’s a network error.
-
-```js
-import MyErrorBoundary from '/MyErrorBoundary'
-const OtherComponent = loadable(() => import('./OtherComponent'))
-const AnotherComponent = loadable(() => import('./AnotherComponent'))
-
-const MyComponent = () => (
-
-
-
-
-
-
-
-
-)
-```
-
-### Delay
-
-To avoid flashing a loader if the loading is very fast, you could implement a minimum delay. There is no built-in API in `@loadable/component` but you could do it using [`p-min-delay`](https://github.com/sindresorhus/p-min-delay).
-
-```js
-import loadable from '@loadable/component'
-import pMinDelay from 'p-min-delay'
-
-// Wait a minimum of 200ms before loading home.
-export const OtherComponent = loadable(() =>
- pMinDelay(import('./OtherComponent'), 200),
-)
-```
-
-### Timeout
-
-Infinite loading is not good for user experience, to avoid it implementing a timeout is a good workaround. You can do it using a third party module like [`promise-timeout`](https://github.com/building5/promise-timeout):
-
-```js
-import loadable from '@loadable/component'
-import { timeout } from 'promise-timeout'
-
-// Wait a maximum of 2s before sending an error.
-export const OtherComponent = loadable(() =>
- timeout(import('./OtherComponent'), 2000),
-)
-```
-
-### Prefetching
-
-Loadable Components is fully compatible with [webpack hints `webpackPrefetch` and `webpackPreload`](https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules).
-
-Most of the time, you want to "prefetch" a component, it means it will be loaded when the browser is idle. You can do it by adding `/* webpackPrefetch: true */` inside your import statement.
-
-```js
-import loadable from '@loadable/component'
-
-const OtherComponent = loadable(() =>
- import(/* webpackPrefetch: true */ './OtherComponent'),
-)
-```
-
-> You can extract prefetched resources server-side to add `` in your head.
-
-## [Server side rendering](https://github.com/smooth-code/loadable-components/tree/master/packages/server/README.md)
-
-👉 [See `@loadable/server` documentation](https://github.com/smooth-code/loadable-components/tree/master/packages/server/README.md).
-
-
-## API
-
-### loadable
-
-Create a loadable component.
-
-| Arguments | Description |
-| ------------------ | ---------------------------------------- |
-| `loadFn` | The function call to load the component. |
-| `options` | Optional options. |
-| `options.fallback` | Fallback displayed during the loading. |
-
-```js
-import loadable from '@loadable/component'
-
-const OtherComponent = loadable(() => import('./OtherComponent'))
-```
-
-### lazy
-
-Create a loadable component "Suspense" ready.
-
-| Arguments | Description |
-| --------- | ---------------------------------------- |
-| `loadFn` | The function call to load the component. |
-
-```js
-import { lazy } from '@loadable/component'
-
-const OtherComponent = lazy(() => import('./OtherComponent'))
-```
-
-### LoadableComponent
-
-A component created using `loadable` or `lazy`.
-
-| Props | Description |
-| ---------- | ------------------------------------------------- |
-| `fallback` | Fallback displayed during the loading. |
-| `...` | Props are forwarded as first argument of `loadFn` |
-
-### loadable.lib
-
-Create a loadable library.
-
-| Arguments | Description |
-| ------------------ | ---------------------------------------- |
-| `loadFn` | The function call to load the component. |
-| `options` | Optional options. |
-| `options.fallback` | Fallback displayed during the loading. |
-
-```js
-import loadable from '@loadable/component'
-
-const Moment = loadable.lib(() => import('moment'))
-```
-
-### lazy.lib
-
-Create a loadable library "Suspense" ready.
-
-| Arguments | Description |
-| --------- | ---------------------------------------- |
-| `loadFn` | The function call to load the component. |
-
-```js
-import { lazy } from '@loadable/component'
-
-const Moment = lazy.lib(() => import('moment'))
-```
-
-### LoadableLibrary
-
-A component created using `loadable.lib` or `lazy.lib`.
-
-| Props | Description |
-| ---------- | ---------------------------------------------------- |
-| `children` | Function called when the library is loaded. |
-| `ref` | Accepts a ref, populated when the library is loaded. |
-| `fallback` | Fallback displayed during the loading. |
-| `...` | Props are forwarded as first argument of `loadFn` |
-
-## MIT
+See [LICENSE](./LICENSE) for more information.
diff --git a/examples/razzle/razzle.config.js b/examples/razzle/razzle.config.js
index 63f5f24..d90b123 100644
--- a/examples/razzle/razzle.config.js
+++ b/examples/razzle/razzle.config.js
@@ -1,27 +1,27 @@
-const path = require('path');
-const LoadableWebpackPlugin = require('@loadable/webpack-plugin');
-const LoadableBabelPlugin = require('@loadable/babel-plugin');
-const babelPresetRazzle = require('razzle/babel');
+const path = require('path')
+const LoadableWebpackPlugin = require('@loadable/webpack-plugin')
+const LoadableBabelPlugin = require('@loadable/babel-plugin')
+const babelPresetRazzle = require('razzle/babel')
module.exports = {
- modify: (config, { target }) => {
- const appConfig = Object.assign({}, config);
+ modify: (config, { target }) => {
+ const appConfig = Object.assign({}, config)
- if (target === 'web') {
- const filename = path.resolve(__dirname, 'build/loadable-stats.json');
+ if (target === 'web') {
+ const filename = path.resolve(__dirname, 'build/loadable-stats.json')
- appConfig.plugins = [
- ...appConfig.plugins,
- new LoadableWebpackPlugin({ writeToDisk: true, filename })
- ];
- }
+ appConfig.plugins = [
+ ...appConfig.plugins,
+ new LoadableWebpackPlugin({ writeToDisk: true, filename }),
+ ]
+ }
- return appConfig;
- },
+ return appConfig
+ },
- modifyBabelOptions: () => ({
- babelrc: false,
- presets: [babelPresetRazzle],
- plugins: [LoadableBabelPlugin]
- })
-};
+ modifyBabelOptions: () => ({
+ babelrc: false,
+ presets: [babelPresetRazzle],
+ plugins: [LoadableBabelPlugin],
+ }),
+}
diff --git a/examples/razzle/src/About/index.js b/examples/razzle/src/About/index.js
index 8ea2507..9a6c8bf 100644
--- a/examples/razzle/src/About/index.js
+++ b/examples/razzle/src/About/index.js
@@ -1,5 +1,5 @@
-import React from 'react';
+import React from 'react'
-const About = () => (
About page
);
+const About = () =>
About page
-export default About;
\ No newline at end of file
+export default About
diff --git a/examples/razzle/src/App.js b/examples/razzle/src/App.js
index e7bcfbb..bf1055d 100644
--- a/examples/razzle/src/App.js
+++ b/examples/razzle/src/App.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import { Router, Link } from '@reach/router';
-import loadable from '@loadable/component';
-import './App.css';
+import React from 'react'
+import { Router, Link } from '@reach/router'
+import loadable from '@loadable/component'
+import './App.css'
-const NotFound = loadable(() => import('./NotFound'));
-const Home = loadable(() => import('./Home'));
-const About = loadable(() => import('./About'));
-const Contact = loadable(() => import('./Contact'));
+const NotFound = loadable(() => import('./NotFound'))
+const Home = loadable(() => import('./Home'))
+const About = loadable(() => import('./About'))
+const Contact = loadable(() => import('./Contact'))
const App = () => (
@@ -20,6 +20,6 @@ const App = () => (
loading...} />
-);
+)
-export default App;
+export default App
diff --git a/examples/razzle/src/Contact/index.js b/examples/razzle/src/Contact/index.js
index f974cc9..8941afb 100644
--- a/examples/razzle/src/Contact/index.js
+++ b/examples/razzle/src/Contact/index.js
@@ -1,5 +1,5 @@
-import React from 'react';
+import React from 'react'
-const Contact = () => (
Contact page
);
+const Contact = () =>
Contact page
-export default Contact;
\ No newline at end of file
+export default Contact
diff --git a/examples/razzle/src/Home/Intro.js b/examples/razzle/src/Home/Intro.js
index 47705b0..0ddfba1 100644
--- a/examples/razzle/src/Home/Intro.js
+++ b/examples/razzle/src/Home/Intro.js
@@ -1,11 +1,11 @@
/* eslint-disable react/jsx-one-expression-per-line */
-import React from 'react';
+import React from 'react'
const Intro = () => (
To get started, edit src/App.js or src/Home.js and
save to reload.
-);
+)
-export default Intro;
+export default Intro
diff --git a/examples/razzle/src/Home/Logo.js b/examples/razzle/src/Home/Logo.js
index 84d99bf..96de7c7 100644
--- a/examples/razzle/src/Home/Logo.js
+++ b/examples/razzle/src/Home/Logo.js
@@ -1,6 +1,6 @@
-import React from 'react';
-import logo from './react.svg';
+import React from 'react'
+import logo from './react.svg'
-const Logo = () => ;
+const Logo = () =>
-export default Logo;
+export default Logo
diff --git a/examples/razzle/src/Home/Welcome.js b/examples/razzle/src/Home/Welcome.js
index 195b0fd..958bc0c 100644
--- a/examples/razzle/src/Home/Welcome.js
+++ b/examples/razzle/src/Home/Welcome.js
@@ -1,5 +1,5 @@
-import React from 'react';
+import React from 'react'
-const Welcome = () =>