state-hoc

@centarius/state-hoc

state-hoc plugin for centarius.

Introduction

Centarius State HOC is created to reduce boilerplate in your render function.

Centarius State HOC is using CentariusConsumer from packages centarius to get current state from centarius component.

You can pass options like LoadingComponent and ErrorComponent to maximize user experience while fetching data takes lot times.

Install

$ npm install --save-dev @centarius/state-hoc

OR

$ yarn add @centarius/state-hoc

API

The API is as same as Connect HOC by React-Redux

TL;DR All static methods will be hoisted

centariusStateHoc: ({ LoadingComponent = null, ErrorComponent = null }) => (Component: React.Component<any, any>) => WrappedComponent: React.Component<any, any>

Usage

// Home.js
import React from 'react';
import { NavLink } from 'react-router-dom';
import centariusStateHoc from '@centarius/state-hoc'

class Home extends React.Component {
  static async getInitialProps({ req, res, match }) {
    const stuff = await CallMyApi();
    return { stuff };
  }

  render() {
    return (
      <div>
        <NavLink to="/about">About</NavLink>
        <h1>Home</h1>
        <div>{this.props.data.stuff}</div>
      </div>
    );
  }
}

export default centariusStateHoc({
  LoadingComponent: () => <div>Loading...</div>,
  ErrorComponent: () => <div>Error!</div>
})(Home);

Support

Any issues or questions can be sent to the centarius monorepo.

Please be sure to specify that you are using @centarius/state-hoc.

License

MIT © Ray Andrew