React-Hookz

React Global Hookz, a simple global state for React with the Hooks API in less than 1kb written in TypeScript

Table of Contents

• Installation
• Usage
• Examples

Installation

npm install react-hookz

Usage

Minimal example:

Actions

export const addToCounter = (store: any, amount: number) => {
  const counter = store.state.counter + amount;
  store.setState({ counter });
};

HOC

import React from "react";
import ReactHookz from "react-hookz";

import * as actions from "../actions/index";

export interface GlobalState {
  counter: number;
}
const initialState: GlobalState = {
  counter: 1
};

const useReactHookz = ReactHookz(React, initialState, actions);
export const connect = Component => {
  return props => {
    let [state, actions] = useReactHookz();
    let _props = { ...props, state, actions };
    return <Component {..._props} />;
  };
};

export default useReactHookz;

Component

import React from "react";
import { connect } from "../store";

interface Props {
  state: any;
  actions: any;
}

const Counter: React.FC<Props> = props => {
  const { state, actions } = props;
  return (
    <div className="Counter">
      <p>
        FC Counter:
        {state.counter}
      </p>
      <button type="button" onClick={() => actions.addToCounter(1)}>
        +1 to global
      </button>
    </div>
  );
};

export default connect(Counter);

Examples

• React Hookz minimal example (like usage above)
• React Hookz HOC
• React Hookz Fetch Action
• Using React Hookz in a class component