Simple, tiny React component lazy-loader. Splits your React app at defined points at the component-level, so there's no unnecessary code delivered.
Published from a part of a private project I wrote. Thought I'd share it with you.
PS - If you're looking for a full-on, feature-rich version, I would use react-loadable.
yarn add react-loadit
- The build is CommonJS and works also with
import/export
using Babel.
Example of conditionally loading inside a modal.
<div>
{this.state.clicked && (
<Modal>
<LoadIt {...otherProps} load={() => import('./OtherComponent')} />
</Modal>
)}
</div>
// webpack.config.js
// ...
// for dynamic imports this takes care of
// grouping loaded chunks, to load only *once*
// NOTE: Webpack 4 might negate the need for this
new CommonsChunkPlugin({
minChunks: 2,
children: true,
deepChildren: true,
async: true,
}),
// ...
Run yarn && yarn start
from a directory inside ./examples
.
Dependencies: You'll need to install
create-react-app
globally.
func|arr, required
- Default export:
() => import(...)
- Named (single) export:
[() => import('./Exported'), 'SomeExport']
- @todo - multiple named exports?
A component to dynamically load.
Default export
<LoadIt load={() => import('./LoadMe')} />
Named export
<LoadIt load={[ () => import('./LoadMe'), 'LoadThisExport' ]} />
func: (obj) => element
const renderLoading = ({ loadError, loadTimeout, pastDelay }) => {
if (loadError) {
return <div>Load error</div>;
} else if (pastDelay && !loadTimeout) {
return <LoadingSkeleton />;
} else if (loadTimeout) {
return <div>Taking awhile...</div>;
}
return null;
};
Return an optional component to show while loading. Passes an object to be used to create a more complex loading component (e.g. load fails).
loadError
(bool) -true
if load failed.loadTimeout
(bool) -true
iftimeout
prop is set and timeout length has past.pastDelay
(bool) -true
ifdelay
is set and delay time has past.
int (default: 250)
<LoadIt delay={200} loadingComponent={...} ... />
Good to use for components that are taking awhile (> ~200ms) to load (possibly on a slow connection, or the component is large in size). Use with loadingComponent
.
The basic idea is to show nothing until this delay has past, then showing a spinner or message to the effect of "loading...". Research has shown the user will perceive the app as being faster if no spinner is shown before 200ms. Makes sense.
int
<LoadIt timeout={10000} loadingComponent={...} ... />
Good to use for components that are taking their time ๐ข to load (possibly on a slow connection, or the component is large in size). Use with loadingComponent
.
bool
<LoadIt shouldLoad={this.state.data.length && true} ... />
This is optional and simply an opportunity to avoid nesting the component inside if/else logic inside of render()
. This will load the core <LoadIt />
, but not dynamically load the desired file, or loading views, until the logic returns true
.
This pattern can be helpful in a situation where you want to show a wrapping component.
Pull the repo and run yarn && yarn test
.