React Advanced Loader
React higher-order component that prevents a wrapped component from rendering until specified conditions are met, i.e., an API response is received or some prop is updated. Displays selected animated spinner from better-react-spinkit collection while loading.
Can be used as a higher-order component or as an ES7 class decorator (see examples)
Getting Started
Installing
npm install react-advanced-loader--save-dev
Examples
// Using ES7 Decorators @Component static propTypes = loadAPIData: PropTypesfuncisRequired isLoaded: PropTypesboolisRequired <div>Component loaded!</div>
// ES2015 Component static propTypes = loadAPIData: PropTypesfuncisRequired isLoaded: PropTypesboolisRequired <div>Component loaded!</div> props propsisLoadedMyComponent // Enhanced component
API
AdvancedLoader([prepare],[isReady],[refreshOnUpdate],[spinnerType],[spinnerOptions])(MyComponent)
Parameters
prepare
[function] A function that is passed props and contains loading logic that precedes component renderingisReady
[function] A function that is passed props and returnstrue
orfalse
depends on specified conditions. Indicates whether a loading process has completed and a component can be displayed.refreshOnUpdate
[array] An array that list all props that need to be watched in order to invoke preparation method againspinnerType
[string] A string that indicates which spinner from better-react-spinkit should be used. Defaults toThreeBounce
.spinnerOptions
[object] Full list of available options for specific spinner type can be found in here.spinnerOptions.color
[string] A string that indicates what spinner color should bespinnerOptions.size
[number] A number that set a size of the spinner, on a scale of 1 to 100. Defaults to15
.
getWrappedInstance()
Returns the underlying wrapped component instance. Useful if you need to access a method or property of the component passed to react-advanced-loader.
Returns object The wrapped React component instance
Author
License
This project is licensed under the MIT License.