use-lazy-component

Simple react hook to lazily load a component

• Can be used as a very simplistic alternative to React.Suspense

Installation

npm i -s use-lazy-component

Or

yarn add use-lazy-component

Usage

Basic usage

import useLazyComponent from 'use-lazy-component';

const SomeComponent = () => {
  const { component: Component, loading, error } = useLazyComponent<BigComponent>(
    () => import('./bigComponent');
  );
 
  return (
    <div>
      {!loading && <Component/> }
    </div>
  )
}

Load different component depending on result of promise

import useLazyComponent from 'use-lazy-component';

const SomeComponent = () => {
  const { component: Component, loading, error } = useLazyComponent<BigComponent>(
    async () => {
      const result = await someAsyncFunction();
 
      if (result) {
        return import('./bigComponent');
      }
      return import('./defaultComponent');
    }
  );
 
  return (
    <div>
      {!loading && <Component/> }
    </div>
  )
}