react-with-spinner

React HOC for displaying a Spinner component while loading.

Install

yarn add react-with-spinner
npm install --save react-with-spinner

Usage

By default withSpinner will look for the property data and if that property contains an loading property that is true then it will render a Spinner.

import compose from 'recompose/compose'
import {withSpinner} from 'react-with-spinner'
 
const Component = compose(
  WrappedComponent => props => <WrappedComponent {...props} data={{loading: true}} />,
  withSpinner(),
)(() => <div></div>)
 

You can override which property withSpinner should look for:

import compose from 'recompose/compose'
import {withSpinner} from 'react-with-spinner'
 
const Component = compose(
  WrappedComponent => props => <WrappedComponent {...props} result={{loading: true}} />,
  withSpinner({prop: 'result'}),
)(() => <div></div>)
 

The spinnerComponent defaults to a React Toolbox ProgressBar component. However, it is possible to provide your own component:

import compose from 'recompose/compose'
import {withSpinner} from 'react-with-spinner'
 
const Loading = () => <span>Loading...</span>
 
const Component = compose(
  WrappedComponent => props => <WrappedComponent {...props} data={{loading: true}} />,
  withSpinner({spinnerComponent: Loading}),
)(() => <div></div>)
 

For more usages, check out the tests

License

react-with-spinner is dual-licensed under Apache 2.0 and MIT terms.