React Lazy Retry

A way to retry with your lazy-loaded React components.

Purpose

React.lazy is great, but out-of-the-box if it fails, that's it. This library allows for you to provide users with a way to manually retry to load the lazy-loaded route without requiring them to do a page refresh.

Implementation Guide

1. Installation

• Yarn:

  yarn add react-lazy-retry

• NPM:

  npm install react-lazy-retry --save

2. Use

import React from 'react';

// Import the component
import RetryableLazy from 'react-lazy-retry';

// Create a component to show while loading (optional)
const LoaderComponent = () => <>Loading...</>;

// Create a component to show when there is an error (optional)
const ErrorRetryComponent = ({ retry }) => (
	<button type="button" onClick={retry}>
		Retry
	</button>
);

// Wrap your async component and provide loading and error components
const MyAsyncComponent = RetryableLazy(() =>
	import('./path/to/component/to/wrap')
);

// Use the component in your application
const App = ({ shouldShowAsyncComponent }) => {
	return (
		<div>
			<h1>My App</h1>
			{shouldShowAsyncComponent && <MyAsyncComponent />}
		</div>
	);
};

API

| Argument Number | Type | Default | Description | | :-------------- | :---------------- | :--------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 1 | Promise | None | This is a promise for the lazy-loaded component. Typically done using import. | | 2 | React Component | <>Loading...</> | This will be shown while the promise for the lazy-loaded component is waiting to resolve. Optional. | | 3 | React Component | <button onClick={retry}>Retry</button> | This is the UI that will be shown to the user if the request for the lazy-loaded component fails. A retry function is passed as props, which if called, will request the component again. Optional. |

Creator

Curtis