react-advanced-loader

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 rendering
• isReady [function] A function that is passed props and returns true or false 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 again
• spinnerType [string] A string that indicates which spinner from better-react-spinkit should be used. Defaults to ThreeBounce.
• 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 be
• spinnerOptions.size [number] A number that set a size of the spinner, on a scale of 1 to 100. Defaults to 15.

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

• George Borunov

License

This project is licensed under the MIT License.