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

Comment and share

Deploy react app by create-react-app

Follow this guide to deploy react app to github pages.
React Create App Readme

Do something to let github pages OK with SPA

Github pages does not support SPA routings now, so you have to do followings:
Follow this guide to make SPA OK with github pages
spa github pages

Comment and share