Lazy-Load React Component Package Documentation

Overview

This package is designed to help lazy-load React components, providing features such as loading components, retry attempts, and error components when all retry attempts have been exhausted. By using this package, you can significantly improve the performance and user experience of your application by loading components only when needed.

Installation

To install the package, run the following command:

1npm install lazy_suspense_retry

or

1yarn add react-lazyload-component

Usage

First, import the package in your project:

1import { lazySuspenseRetry as LSR } from "lazy_suspense_retry"

Then wrap and import your component. Below is example with react-router

1const Home = LSR(() => import("home/home"))
2const PostPage = LSR(() => import("posts/postpage"))
3const EventsPage = LSR(() => import("events/Events"))
4const ErrPage = LSR(() => import("errpage"))
5
6const App = () => {
7    return useRoutes([
8		{ path: "", element: <Home /> },
9		{ path: "post/:postId", element: <PostPage /> },
10		{ path: "events/:eventId", element: <EventsPage /> },
11		{ path: "*", element: <ErrPage /> },
12	])
13}

Configuration

Loading Component

To display a custom loading component while the target component is being loaded, pass the loader prop:

Global Option applicable to all component

1LSR.defaultOption = {
2	loader: (
3		<div className={"circular-loader"}>
4			<CircularProgress size={24} thickness={2} />
5		</div>
6	),
7}

Individual option only affect Home Component

1const Home = LSR(() => import("home/home"), {
2    loader: (
3		<div className={"circular-loader"}>
4			<CircularProgress size={24} thickness={2} />
5		</div>
6	)
7})

---

Retry Attempt

To set the number of retry attempts before displaying an error component, use the maxRetryAttempt prop, and set the interval of each attempt:

Global Option applicable to all component

1LSR.defaultOption = {
2	maxRetryAttempt: 5, // will stop after 5 retry attempt
3    interval: 1000, // 1 sec interval of each retry 
4}

Individual Option only affect Home Component

1const Home = LSR(() => import("home/home"), {
2    maxRetryAttempt: 5, // will stop after 5 retry attempt
3    interval: 1000, // 1 sec interval of each retry 
4})

Error Component

To display a custom error component when all retry attempts have been exhausted. Pass a Component that accepts props with { error: Error, detail: string } :

1// global option
2LSR.defaultOption = {
3	crashPlaceholder: FallbackComponent
4}
5
6// individual option
7const Home = LSR(() => import("home/home"), {
8    crashPlaceholder: FallbackComponent
9})
10
11
12const FallbackComponent: React.FC<{
13	error?: Error
14	details?: string | undefined
15}> = ({ error, details }) => {
16	return (
17        <div>
18            <ErrorMessage error={error || new Error("unknown error")} />
19            <pre>{details}</pre>
20            <Button $colorVariant={Variant.ERROR} onClick={() => window.location.reload()}>
21                Error Please Reload
22            </Button>
23        </div>
24	)
25}

Advanced Usage

You can combine all configurations for a complete implementation:

1import { lazySuspenseRetry as LSR } from "lazy_suspense_retry"

Then wrap and import your component. Below is example with react-router

1const Home = LSR(() => import("home/home"))
2const PostPage = LSR(() => import("posts/postpage"))
3const EventsPage = LSR(() => import("events/Events"))
4const ErrPage = LSR(() => import("errpage"))
5
6
7LSR.defaultOption = {
8	loader: (
9		<div className={"circular-loader"}>
10			<CircularProgress size={24} thickness={2} />
11		</div>
12	),
13	maxRetryAttempt: 10,
14	interval: 1000,
15	crashPlaceholder: FallbackComponent,
16}
17
18export const App = () => {
19    return useRoutes([
20		{ path: "", element: <Home /> },
21		{ path: "post/:postId", element: <PostPage /> },
22		{ path: "events/:eventId", element: <EventsPage /> },
23		{ path: "*", element: <ErrPage /> },
24	])
25}
26
27
28const FallbackComponent: React.FC<{
29	error?: Error
30	details?: string | undefined
31}> = ({ error, details }) => {
32	return (
33        <div>
34            <ErrorMessage error={error || new Error("unknown error")} />
35            <pre>{details}</pre>
36            <Button $colorVariant={Variant.ERROR} onClick={() => window.location.reload()}>
37                Error Please Reload
38            </Button>
39        </div>
40	)
41}

API

Props

• loader?: React.ReactNode (optional): The Component to be displayed while the target component is loaded

• maxRetryAttempt: number (required): The maximum number of retry attempts before showing the error component. Default: 10, 0 means no retries.

  interval: number // interval in ms between retryAttempt crashPlaceholder: React.FC<{ error?: Error; details?: string }>