React Loadable TypeScript Examples

AddBeerAsync_OptionsWithoutRender.ts

import * as Loadable from 'react-loadable';
import OptionsWithoutRender = LoadableExport.OptionsWithoutRender;
import AsyncLoader from '../components/AsyncLoader';
import {IProps} from './AddBeer';

const loadableOptions: OptionsWithoutRender<IProps> = {
    loader: () => import(/* webpackChunkName: "AddBeer" */ './AddBeer'),
    loading: AsyncLoader,
};

export default Loadable(loadableOptions);

AddBeerAsync_OptionsWithRender.ts

import * as React from 'react';
import * as Loadable from 'react-loadable';
import OptionsWithRender = LoadableExport.OptionsWithRender;
import AsyncLoader from '../components/AsyncLoader';
import {IProps} from './AddBeer';

const loadableOptions: OptionsWithRender<IProps, any> = {
    loader: () => import(/* webpackChunkName: "AddBeer" */ './AddBeer'),
    loading: AsyncLoader,
    render(loaded: any, props: IProps) {
        const Component: any = loaded.default; // tslint:disable-line:variable-name

        return <Component {...props} />;
    },
};

export default Loadable(loadableOptions);

  
/*
<AddBeerAsync
    data={'stuff'}
/>
*/

@katesroad it's been awhile since I wrote this code but looks like LoadableExport is part of the react-loadable library.
https://cdn.jsdelivr.net/npm/@types/react-loadable@5.3.3/index.d.ts

Check out the latest way to code split with the use of React lazy
https://github.com/codeBelt/react-redux-architecture/blob/TypeScript/src/views/App.tsx#L12

Also check out my article on the latest way I build react apps
https://medium.com/@robertsavian/my-awesome-react-redux-structure-6044e5007e22