react-loosely-lazy

The future of React async components, today.

Same code on server and client, handling SSR transparently
Priority support, allowing per-phase loading
Customisable deferred loading and phases definition
Preloading support
Works with both React.render() and React.hydrate()

Basic usage

npm i react-loosely-lazy
# or
yarn add react-loosely-lazy

Basic use case: SSR + loading at bootstrap time

import { lazy, LazySuspense } from 'react-loosely-lazy';

const AsyncMyComponent = lazy(() => import('./MyComponent'));

const App = () => (
  <LazySuspense fallback="...">
    <AsyncMyComponent />
  </LazySuspense>
);

No SSR use case: Fallback on SSR + loading at bootstrap time

import { lazy, LazySuspense } from 'react-loosely-lazy';

const AsyncMyComponent = lazy(() => import('./MyComponent'), {
  ssr: false,
});

const App = () => (
  <LazySuspense fallback={<MyComponentSkeleton />}>
    <AsyncMyComponent />
  </LazySuspense>
);

Phase loading use case: SSR + specific phase loading

import { lazyForDisplay, useLazyPhase, LazySuspense } from 'react-loosely-lazy';

const AsyncMyComponent = lazyForDisplay(() => import('./MyComponent'));

const App = () => {
  const { setPhaseDisplay } = useLazyPhase();
  // eg start loading MyComponent after the app is mounted
  useEffect(() => {
    setPhaseDisplay();
  }, [setPhaseDisplay]);
  return (
    <LazySuspense fallback="...">
      <AsyncMyComponent />
    </LazySuspense>
  );
};

Trigger loading use case: No SSR & loading on user iteraction

import { lazy, LazyWait, LazySuspense } from 'react-loosely-lazy';

const AsyncMyComponent = lazyForInteraction(() => import('./MyComponent'));

const App = () => {
  const [shouldLoad, setLoad] = useState(false);

  return (
    <>
      <button onClick={() => setLoad(true)}>Load</button>
      <LazyWait until={shouldLoad}>
        <LazySuspense fallback={shouldLoad ? <MyComponentSkeleton /> : null}>
          <AsyncMyComponent />
        </LazySuspense>
      </LazyWait>
    </>
  );
};

Documentation

Check the docs website
or the docs folder.

Examples

See loosely-lazy in action: run npm run start and then go and check: http://localhost:8080/

Contributing

To test your changes you can run the examples (with npm run start). Also, make sure you run npm run preversion before creating you PR so you will double check that linting, types and tests are fine.

rohan-deshpande/react-loosely-lazy