Higher Order Component Loading Spinner Library

Usage no npm install needed!

<script type="module">
  import 4soFourseasonsReactHocSpinners from 'https://cdn.skypack.dev/@4so-fourseasons/react-hoc-spinners';


Build Status Coverage Status npm version Maintainability JavavaScript Style Guide style: styled-components

Github api docs


react-hoc-spinners is a simple loading spinner library for your React projects.


npm i --save @4so-fourseasons/react-hoc-spinners


For detailed information about each component/function have a look at our API

Note: You can either use named imports of each respective component/function or use the default import with dot notation.

Default use case

In most cases you will want to use the provided makeWithLoadingSpinner factory function. This provides you with a higher-order component which you can use to wrap your Components with a loading spinner whenever the provided condition is true.


import { makeWithLoadingIndicator } from '@4so-fourseasons/react-hoc-spinners'

import MyComponent from '<some-path>/MyComponent'

const withLoadingIndicator = makeWithLoadingIndicator({
    condition: ({ loading } => loading

// Export wrapped component
export default withLoadingIndicator(MyComponent)

Spinner without HOC

It is also possible to use all provided spinners without a wrapping higher-order component, in case you want to implement all logic yourself. Just use named imports as shown in our API spec.


We use SemVer for versioning.