react-hookz
TypeScript icon, indicating that this package has built-in type declarations

1.0.12 • Public • Published

React-Hookz

Build Status Language grade: JavaScript npm version install size bundle size downloads

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 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 {
  counternumber;
}
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

Package Sidebar

Install

npm i react-hookz

Weekly Downloads

67

Version

1.0.12

License

MIT

Unpacked Size

16.5 kB

Total Files

13

Last publish

Collaborators

  • garywenneker