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