@centarius/state-hoc

Centarius State HOC

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@centarius/state-hoc
Minified + gzip package size for @centarius/state-hoc in KB

Readme

@centarius/state-hoc npm

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.