react-hookz
Version:
[](https://travis-ci.com/garywenneker/react-hookz) [ • 3 kB
Markdown
[](https://travis-ci.com/garywenneker/react-hookz)
[](https://lgtm.com/projects/g/GaryWenneker/react-hookz/context:javascript)
[](https://badge.fury.io/js/react-hookz)
[](https://packagephobia.now.sh/result?p=react-hookz)
[](https://bundlephobia.com/result?p=react-hookz)
[](https://img.shields.io/npm/dt/react-hookz.svg)
[](https://david-dm.org/GaryWenneker/react-hookz.svg)
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](
```
npm install react-hookz
```
```javascript
export const addToCounter = (store: any, amount: number) => {
const counter = store.state.counter + amount;
store.setState({ counter });
};
```
```javascript
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;
```
```javascript
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);
```
- [React Hookz minimal example (like usage above)](https://codesandbox.io/s/react-hookz-global-state-vl5x7)
- [React Hookz HOC](https://codesandbox.io/s/react-hookz-hoc-112fy)
- [React Hookz Fetch Action](https://codesandbox.io/s/react-hookz-fetch-action-demo-ellw3)
- [Using React Hookz in a class component](https://codesandbox.io/s/react-hookz-class-component-hfimj)