# react-dynamic-loadable **Repository Path**: mirrors_jaywcjlove/react-dynamic-loadable ## Basic Information - **Project Name**: react-dynamic-loadable - **Description**: A higher order component for loading components with dynamic imports. - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-10-22 - **Last Updated**: 2025-09-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README react-dynamic-loadable --- [![Build and Lint](https://github.com/jaywcjlove/react-dynamic-loadable/workflows/Build%20and%20Lint/badge.svg)](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); ```