React-with-spinner NPM

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