-
-
-
- hoc-react-loader
-
-
-
-
-
- This is a higher order component ("HOC").
- Its purpose is to call a
load
callback passed through the
props
of
- a component only once (at
componentWillMount
). This is convenient to load
- data from a backend for instance. The component shows a loading indicator when it's
- waiting for the props to be defined. The loading indicator can be changed easily.
-
-
-
- Check out the examples below. Use the button to trigger a stubbed loading.
-
-
-
-
-
}
- >
-
-
Base: `this.props.loaded` is defined
-
- In this example, the loader wraps a Component with
-
this.props.loaded
defined.
- It means that the loader calls
this.props.load
- if presents, then waits for
this.props.loaded
- to be truthy, and finally displays the wrapped components.
- While waiting for
this.props.loaded
- to be truthy, hoc-react-loader takes care of displaying
- a spinner based on the background color.
-
-
-
-
-
}
- >
-
-
OneParam: waiting for a given param
-
- Like in the previous example, the default loading indicator is used (the spinner) and
-
this.props.load
is called. But this time, the
HOC
waits for
-
this.props.prop
as specified in the
print
param.
-
-
-
-
-
}
- >
-
-
TwoParams: wait for multiple props
-
- If the
print
parameter is given an array of props instead of just one prop,
-
hoc-react-loader
will wait for all of the specified props to be truthy.
- In this example, these are
prop
and
prop2
.
-
-
-
-
-
}
- >
-
-
DontWait: don't show the placeholder
-
- If the
print
param is set to
true
the
hoc-react-loader
- will not display the loading indicator (default or custom).
- But
this.props.load
is still called if presents!
-
-
-
-
-
}
- >
-
-
LoadingIndicator: change the default loading indicator
-
- In this example, the default loading indicator is replaced with a custom one.
- The component waits for the default prop (
this.props.loaded
).
-
-
-
-
Wait ...
-
-const LoadingIndicator = ({ className = '' }) => (
-