Centarius State HOC


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


@centarius/state-hoc npm

state-hoc plugin for centarius.


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.


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


$ yarn add @centarius/state-hoc


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>


// 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 (
        <NavLink to="/about">About</NavLink>

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


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

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


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.