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

Dependencies (0)

    Dev Dependencies (11)

    Package Sidebar

    Install

    npm i react-hookz

    Weekly Downloads

    60

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • garywenneker