Name: react-loadable
Owner: Meteor
Description: A higher order component for loading components with promises.
Forked from: thejameskyle/react-loadable
Created: 2017-03-13 18:36:08.0
Updated: 2017-03-13 18:36:09.0
Pushed: 2017-03-12 18:48:59.0
Homepage: null
Size: 51
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
react-loadable
A higher order component for loading components with promises.
null
until after a delay
(default: 200ms)<LoadingComponent/>
after delay
and before loader()
is successfulComponent
returned by loader()
on success<ErrorComponent/>
any time the loader()
fails until it succeeds.require()
Example Project: https://github.com/thejameskyle/react-loadable-example
Introductory blog post: https://medium.com/@thejameskyle/react-loadable-2674c59de178#.6h46yjgwr
flow
rt path from 'path';
rt React from 'react';
rt Loadable from 'react-loadable';
Props = {
Loading: boolean,
ror: Error | null,
stDelay: null,
MyLoadingComponent = ({isLoading, error, pastDelay}: Props) => {
(isLoading) {
return pastDelay ? <div>Loading...</div> : null; // Don't flash "Loading..." when we don't need to.
else if (error) {
return <div>Error! Component failed to load</div>;
else {
return null;
LoadableMyComponent = Loadable(
=> import('./MyComponent'),
LoadingComponent,
0,
th.join(__dirname, './MyComponent')
rt default class Application extends React.Component {
nder() {
return <LoadableMyComponent/>;
able(
ader: () => Promise<React.Component>,
adingComponent: React.Component,
lay?: number = 200,
rverSideRequirePath?: string
loader
Function returning promise returning a React component displayed on success.
Resulting React component receives all the props passed to the generated component.
LoadingComponent
React component displayed after delay
until loader()
succeeds. Also
responsible for displaying errors.
Props = {
Loading: boolean,
ror: Error | null,
stDelay: boolean,
MyLoadingComponent = ({isLoading, error, pastDelay}: Props) => {
(isLoading) {
return pastDelay ? <div>Loading...</div> : null; // Don't flash "Loading..." when we don't need to.
else if (error) {
return <div>Error! Component failed to load</div>;
else {
return null;
delay
(optional, defaults to 200
, in milliseconds)Only show the LoadingComponent
if the loader()
has taken this long to
succeed or error.
serverSideRequirePath
(optional)When rendering server-side, require()
this path to load the component
instead, this way it happens synchronously.
Loadable.preload()
The generated component has a static method preload()
for calling the loader
function ahead of time. This is useful for scenarios where you think the user
might do something next and want to load the next component eagerly.
Example:
LoadableMyComponent = Loadable(
=> import('./MyComponent'),
LoadingComponent,
s Application extends React.Component {
ate = { showComponent: false };
Click = () => {
this.setState({ showComponent: true });
MouseOver = () => {
LoadableMyComponent.preload();
nder() {
return (
<div>
<button onClick={this.onClick} onMouseOver={this.onMouseOver}>
Show loadable component
</button>
{this.state.showComponent && <LoadableMyComponent/>}
</div>
)