A simple higher order component for easy code splitting.
npm install react-lazy-importA simple higher order component for easy code splitting.
* Supports import()
* Supports react-router v4
* Ability to add
* Ability to Add
jsx
import createLazyContainer from 'react-lazy-import';const MyComponent = createLazyContainer(() => import('./MyComponent'));
const App = () => {
return (
My lazy component:
);
}
`Complete example
$3
jsx
// Greeter.jsx
import React from 'react';const Greeter = ({ name }) => (
Hello {name}, I am lazy loaded
);export default Greeter;
`
jsx
// App.jsx
import React from 'react';
import { render } from 'react-dom';
import createLazyContainer from 'react-lazy-import';const Loading = () =>
Loading...;
const Error = () => Error!;const Greeter = createLazyContainer(() => import('./Greeter'), Loading, Error);
const App = () => {
return (
My lazy component:
);
}render(
`$3
jsx
// Greeter.tsx ...
`jsx
// App.tsx
import * as React from 'react';
import createLazyContainer from 'react-lazy-import';const Loading: React.SFC<{}> = () =>
Loading...;
const Error: React.SFC<{}> = () => Error!;interface IGreeterProps {
name: string;
}
// TypeScript currently doesn't support
import()
// so we need to use System.import() alias
// This won't be needed in the future (TypeScript v2.4)
declare const System: {
import: (path: string) => Promise;
};
const Greeter = createLazyContainer(() => System.import('./Greeter'), Loading, Error);
const App = () => {
return (
My lazy component:
);
}
`$3
jsx
...import { Route, Switch } from 'react-router-dom';
const Loading: React.SFC<{}> = () =>
Loading...;
const Error: React.SFC<{}> = () => Error!;const Home = createLazyContainer(() => import('./Home'), Loading, Error);
const About = createLazyContainer(() => import('./About'), Loading, Error);
const Contact = createLazyContainer(() => import('./Contact'), Loading, Error);
const NotFound = createLazyContainer(() => import('./NotFound'), Loading, Error);
class App extends React.Component {
render () {
return (
);
}
}
...
`API
$3
*
Function returning promise which returns a React component.
*
(optional) React component which is rendered while your component is loading.
*
errorComponent` (optional) React component which is rendered when loader fails to load your component