README.md

Required Modules

• lodash
• react

Usage

Basic Usage

<LazyComponent<PropsOfElement>
 component={()=> import('./Element')}
 any="props"
 the="element"
 needs
/>

With Child Component

<LazyComponent<PropsOfElement>
 component={()=> import('./Element')}
 any="props"
 the="element"
 needs
>
  <SimpleElement />
</LazyComponent> 

LazyComponent.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import { pickBy } from 'lodash';
import React, { Suspense } from 'react';

/**
 *
 * @example Dynamically Load Component
 * <LazyComponent<PropsOfElement>
 *  component={()=> import('./Element')}
 *  any="props"
 *  the="element"
 *  needs
 * />
 * @example Dynamically load with children
 * <LazyComponent<PropsOfElement>
 *  component={()=> import('./Element')}
 *  any="props"
 *  the="element"
 *  needs
 * >
 *   <SimpleElement />
 * </LazyComponent>
 *
 */
export default function LazyComponent<T>(
  props: T & { component: () => Promise<{ default: React.ComponentType<any> }> }
): JSX.Element {
  const Component = React.lazy(props.component);
  const Props = pickBy(props, (_value, key) => key !== 'component');
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Component {...Props} />
      </Suspense>
    </div>
  );
}