https://github.com/martynaskadisa/react-lazy-import
https://github.com/martynaskadisa/react-lazy-import
code-splitting lazy-loading react typescript webpack
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/martynaskadisa/react-lazy-import
- Owner: martynaskadisa
- License: mit
- Created: 2017-06-15T18:05:13.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T20:16:38.000Z (over 3 years ago)
- Last Synced: 2025-08-02T08:55:48.875Z (10 months ago)
- Topics: code-splitting, lazy-loading, react, typescript, webpack
- Language: TypeScript
- Size: 131 KB
- Stars: 12
- Watchers: 1
- Forks: 3
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-lazy-import
## DEPRECATED: Please use `React.lazy` or `@loadable/component` which is a recommended solution by React team
A simple higher order component for easy code splitting.
## Features
* Supports `import()`
* Supports react-router v4
* Ability to add ``
* Ability to Add ``
## Quick example
```jsx
import createLazyContainer from 'react-lazy-import';
const MyComponent = createLazyContainer(() => import('./MyComponent'));
const App = () => {
return (
My lazy component:
);
}
```
## Complete example
```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(, document.getElementById('app'));
```
### Usage with react-router
```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
### `createLazyContainer(loader, [loadingComponent], [errorComponent])`
* `loader: () => Promise`
Function returning promise which returns a React component.
* `loadingComponent` (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