Created
August 10, 2019 10:46
-
-
Save karpolan/80cf28cb742851fcb3abb7796c4f7fdc to your computer and use it in GitHub Desktop.
withSuspense() HOC for React.lazy() + React.Suspense
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { CircularProgress, LinearProgress } from '@material-ui/core/'; | |
/** | |
* Wraps the React Component with React.Suspense and FallbackComponent while loading. | |
* @param {React.Component} WrappedComponent - lazy loading component to wrap. | |
* @param {React.Component} FallbackComponent - component to show while the WrappedComponent is loading. | |
*/ | |
export const withSuspense = (WrappedComponent, FallbackComponent = null) => { | |
return class extends React.Component { | |
render() { | |
if (!FallbackComponent) FallbackComponent = <LinearProgress />; // by default | |
return ( | |
<React.Suspense fallback={FallbackComponent}> | |
<WrappedComponent {...this.props} /> | |
</React.Suspense> | |
); | |
} | |
}; | |
}; | |
... | |
// Usage | |
const lazySomeComponent = React.lazy(() => import('./xxx/SomeComponent')); | |
export const SomeComponent = withSuspense(lazySomeComponent); | |
export const SomeComponentWithCircularProgress = withSuspense(lazySomeComponent, <CircularProgress />); | |
export const SomeComponentWithDiv = withSuspense(lazySomeComponent, <div>Loading...</div>); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice! A comment on the naming - the argument you pass to
Suspense
'sfallback
prop is not actually a React component - it's a tree of React elements, in TS typed asReactNode
. So the namingFallbackComponent
(capitalised, with "Component") is actually misleading - note you never write<FallbackComponent />
. A better name for the second argument of the HOC would be simplyfallback
, orfallbackElement
.