react-storm

react-storm

A simple React store management library.

Getting started

npm i react-storm

Usage Example

• define a store/model (e.g. model.ts)

import { createModel } from "react-storm";

class TestVM {
  testNum = 3;

  public setTestNum(value: number) {
    this.testNum = value;
  }
}

const useTestVM = createModel(TestVM);

export default useTestVM;

• create your component (e.g. Clicker.tsx)

import useTestVM from "./model";
import { useCallback } from "react";

const Clicker = () => {
  const { testNum, setTestNum } = useTestVM(
    ({ testNum, setTestNum }) => ({
        testNum,
        setTestNum
    })
  );

  const handleClick = useCallback(() => {
    setTestNum(testNum + 1);
  }, [setTestNum, testNum]);

  return (
    <>
      <code>{testNum}</code>
      <button onClick={handleClick}>+</button>
    </>
  );
};

export default Clicker;

• Use your component

import "./styles.css";
import Clicker from "./clicker";

export default function App() {
  return (
    <div className="App">
        <Clicker />
        <Clicker />
    </div>
  );
}