inferno-async-component
Bridge between inferno-js and webpack's dynamic import. With this you can asynchronously load your components.
install
npm i -s inferno-async-component
.
Usage
Preloaded async component / immediate loading
When you want the component to load immediately even when you are not yet using it. You can do it like this:
import asyncComponent from 'inferno-async-component'; const MyAsyncComponent = ; // Then you can render it like a usual component <div> <p>Your contents goes here</p> <MyAsyncComponent /> <p>Your contents goes here</p> </div>;
Not-preloaded async component / on-demand loading
When you want the component to load when you used it. You can do it like this:
import asyncComponent from 'inferno-async-component'; const MyAsyncComponent = ; // Then you can render it like a usual component <div> <p>Your contents goes here</p> <MyAsyncComponent /> <p>Your contents goes here</p> </div>;
Render a placeholder while the component is loading
The component may take a while to load depending on many factors. Wwhen you want to render something to serve as a placeholder while the component hasn't rendered yet, like a spinner for example you can provide a second argument which should be the component you want to serve as the placeholder.
import asyncComponent from 'inferno-async-component';import SpinnerComponent from '../components/SpinnerComponent'; const MyAsyncComponent = ; /** * Then you can render it like a usual component * Now the SpinnerComponent would be rendered while MyAsyncComponent is not ready to be rendered yet. */ <div> <p>Your contents goes here</p> <MyAsyncComponent /> <p>Your contents goes here</p> </div>;
Async components may fail to load due to network errors
You can handler error by either providing a third argument and/or by providing a failedCallback
prop to your component. This should be a function that would accept error
as the only parameter. If you provide both, both would be called but failedCallback
prop would be called first.
Third argument
import asyncComponent from 'inferno-async-component';import SpinnerComponent from '../components/SpinnerComponent'; const MyAsyncComponent = ; /** * Then you can render it like a usual component * Now the SpinnerComponent would be rendered while MyAsyncComponent is not ready to be rendered yet. */ <div> <p>Your contents goes here</p> <MyAsyncComponent /> <p>Your contents goes here</p> </div>;
failedCallback
component prop
import asyncComponent from 'inferno-async-component';import SpinnerComponent from '../components/SpinnerComponent'; const MyAsyncComponent = ; /** * Then you can render it like a usual component * Now the SpinnerComponent would be rendered while MyAsyncComponent is not ready to be rendered yet. */ <div> <p>Your contents goes here</p> <MyAsyncComponent = /> <p>Your contents goes here</p> </div>;
failedCallback
prop
Both third argument and import asyncComponent from 'inferno-async-component';import SpinnerComponent from '../components/SpinnerComponent'; const MyAsyncComponent = ; /** * Then you can render it like a usual component * Now the SpinnerComponent would be rendered while MyAsyncComponent is not ready to be rendered yet. */ <div> <p>Your contents goes here</p> <MyAsyncComponent = /> <p>Your contents goes here</p> </div>;