React HOC for displaying a Spinner component while loading.
yarn add react-with-spinner
npm install --save react-with-spinner
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 Loading = () => <span>Loading...</span>
const Component = compose(
WrappedComponent => props => <WrappedComponent {...props} data={{loading: true}} />,
withSpinner({spinnerComponent: Loading}),
)(() => <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>)
For more usages, check out the tests
react-with-spinner is dual-licensed under Apache 2.0 and MIT terms.