A higher order component for loading components with dynamic imports. Support vite and webpack.
Install
yarn add @cond/react-loadable
npm install @cond/react-loadableUsage
import Loadable from '@cond/react-loadable';
import Loading from './my-loading-component';
const LoadableComponent = Loadable({
loader: () => import('./my-component1'),
loading: Loading,
timeout: 20000,
});const LoadableComponent = Loadable(() => import('./my-component1'));
export default class App extends React.Component {
render() {
return <LoadableComponent/>;
}
}Customizing rendering
export const LoadableComponent = Loadable({
loader: () => import('./my-component1'),
loading: Loading,
render(loaded, props) {
const Component = loaded;
const ref = props.forwardRef || undefined;
return <Component {...props} ref={ref} />;
},
});