Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jaywcjlove/react-dynamic-loadable
A higher order component for loading components with dynamic imports.
https://github.com/jaywcjlove/react-dynamic-loadable
code-splitting import loadable loadable-components react react-router redux
Last synced: 2 months ago
JSON representation
A higher order component for loading components with dynamic imports.
- Host: GitHub
- URL: https://github.com/jaywcjlove/react-dynamic-loadable
- Owner: jaywcjlove
- Created: 2018-03-29T09:48:47.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-25T14:15:21.000Z (3 months ago)
- Last Synced: 2024-10-29T23:49:56.217Z (2 months ago)
- Topics: code-splitting, import, loadable, loadable-components, react, react-router, redux
- Language: JavaScript
- Size: 1.24 MB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
react-dynamic-loadable
---
[](https://github.com/jaywcjlove/react-dynamic-loadable/actions)
A higher order component for loading components with dynamic imports.
## Install
```bash
npm install react-dynamic-loadable --save
```
## Simple Example
> [Simple Example code](./example/simple)
```js
import loadable from 'react-dynamic-loadable';
import Loading from './my-loading-component';
// Add Loading component.
loadable.setDefaultLoadingComponent(
Loading);
const LoadableComponent = loadable({
component: () => import('./my-component'),
// LoadingComponent: () => Loading,
});
export default class App extends React.Component {
render() {
return ;
}
}
```
## Example
Use [Redux](https://github.com/reactjs/redux) (**[@rematch](https://github.com/rematch/rematch)**), [React Router](https://github.com/ReactTraining/react-router) [Example](./example/router-redux-rematch).
> [Example code](./example/router-redux-rematch)
```js
import React from 'react';
import { model } from '@rematch/core';
import loadable from 'react-dynamic-loadable';
const dynamicWrapper = (models, component) => loadable({
models: () => models.map((m) => {
return import(`./models/${m}.js`).then((md) => {
model({ name: m, ...md[m] || md.default });
});
}),
component,
LoadingComponent: () => loading....,
});
export const getRouterData = () => {
const conf = {
'/': {
component: dynamicWrapper(['user'], () => import('./layouts/BasicLayout')),
},
'/home': {
component: dynamicWrapper([], () => import('./routes/Home')),
},
'/login': {
component: dynamicWrapper(['user'], () => import('./routes/Login')),
},
};
return conf;
};
```
## Server-Side Rendering
```js
// webpack.config.js
import { DynamicLoadablePlugin } from 'react-dynamic-loadable/DynamicLoadablePlugin';
export default {
plugins: [
new DynamicLoadablePlugin({
filename: './dist/loadable-assets.json',
exclude: /.(js|css)$/
}),
],
};
```
```js
import { getBundles } from 'react-dynamic-loadable/DynamicLoadablePlugin';
let bundles = getBundles(stats, modules);
```