2.0.1 • Published 6 years ago
react-advanced-loader v2.0.1
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
import React, { PropTypes } from 'react'
import AdvancedLoader from 'react-advanced-loader'
@AdvancedLoader({
prepare: (props) => props.loadAPIData(),
isReady: (props) => props.isLoaded
})
export default class MyComponent extends React.Component {
static propTypes = {
loadAPIData: PropTypes.func.isRequired,
isLoaded: PropTypes.bool.isRequired
}
render() (
<div>Component loaded!</div>
)
}
// ES2015
import React, { PropTypes } from 'react'
import AdvancedLoader from 'react-advanced-loader'
class MyComponent extends React.Component {
static propTypes = {
loadAPIData: PropTypes.func.isRequired,
isLoaded: PropTypes.bool.isRequired
}
render() (
<div>Component loaded!</div>
)
}
export default AdvancedLoader({
prepare: (props) => props.loadAPIData(),
isReady: (props) => props.isLoaded
})(MyComponent) // 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.