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
npm install react-hookz
Usage
Minimal example:
Actions
export interface IActions {
addToCounter: (amount: number) => void;
}
export interface IState {
counter: number;
}
export interface IStore {
state: IState;
setState: (state: any) => void;
}
export const addToCounter = (store: IStore, amount: number) => {
const counter = store.state.counter + amount;
store.setState({ counter });
};
export default { addToCounter };
HOC
import React from "react";
import ReactHookz from "react-hookz";
import actions from "../actions";
export interface IState {
counterA: number;
counterB: number;
postcode?: string;
}
const initialState: IState = {
counterA: 1,
counterB: 1,
postcode: "3991"
};
const useReactHookz = ReactHookz(React, initialState, actions);
/**
* Connect allows you to use the React Hookz functionality from a higher ordered component.
* All properties and state will be avalibale.
* @param Component Your component
* @example connect(MyComponent);
* @see https://github.com/GaryWenneker/react-hookz
*/
export const connect = <P extends object>(
Component: React.ComponentType<P>
) => {
return props => {
let [state, actions] = useReactHookz();
let _props = { ...props, state, actions };
return <Component {..._props as P} />;
};
};
export default useReactHookz;
Component
Using a HOC
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);
Using in a Function Component
import React from "react";
import ReactHookz from "react-hookz";
import { renderTime } from "../utils/index";
import Actions, { IState, IActions } from "../actions";
const initialState: IState = {
counter: 1
};
const useReactHookz = ReactHookz(React, initialState, Actions);
const Counter: React.FC = () => {
// using ReactHookz
const [globalState, globalActions]: [IState, IActions] = useReactHookz();
return (
<div className="Counter">
<p>
FC Counter:
{globalState.counter}
</p>
<button type="button" onClick={() => globalActions.addToCounter(1)}>
+1 to global
</button>
<p>FC Counter {renderTime()}</p>
</div>
);
};
export default Counter;