@4so-fourseasons/react-hoc-spinners

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';
</script>

README

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

Github api docs

react-hoc-spinners

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

Installation

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

Usage

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.

Example

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.

Versioning

We use SemVer for versioning.