A Simple Higher Order Component example

Simple example

For loading spinner with different Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// HOC declaration
function withLoadingSpinner(Component) {
  return function EnhancedComponent({ isLoading, ...props }) {
    if (!isLoading) {
      return <Component { ...props } />;
    }
    return <LoadingSpinner />;
  };
}
// Usage
const ListItemsWithLoadingIndicator = withLoadingSpinner(ListItems);
<ListItemsWithLoadingIndicator
  isLoading={props.isLoading}
  list={props.list}
/>

Recompose

https://github.com/rafrex/spa-github-pages
A React Library for HOC