hermes-io

A lightweight React library that allows communication between components by using the observer pattern and the hook api.

Documentation

See: https://hermes-io-docs.vercel.app/

Usage

``javascript
import { MicroStore } from "hermes-io";

export const store = new MicroStore();
export const storeId = 'counter-id';
`

`javascript
export const actions = {
INCREMENT: "INCREMENT",
DECREMENT: "DECREMENT"
};

export default function reducer(store, action) {
const actionsMap = {
[actions.INCREMENT]: () => {
store.state.count += 1;
},
[actions.DECREMENT]: () => {
store.state.count -= 1;
},
};
return actionsMap[action.payload.type]();
};
`

`javascript
import { useObservableStore } from "hermes-io";
import { store, storeId } from "@/store";
import reducer, { actions } from "@/reducer";

export default function App() {
useObservableStore(storeId, { count: 0 }, reducer, store);

const increment = () => store.mutate({ type: events.INCREMENT });

const decrement = () => store.mutate({ type: events.DECREMENT });

return (



);
};
`

`javascript
import { useMutations } from "hermes-io";
import { store, storeId } from "@/store";
import { actions } from "@/reducer";

export function Counter() {
const { state, onEvent } = useMutations({
initialState: { count: 0 },
id: storeId,
store,
});
const handleEvent = (value, _resolver, _setNoUpdate, currentState) => ({ count: currentState.count });

onEvent(actions.INCREMENT, handleEvent);
onEvent(actions.DECREMENT, handleEvent);

return

Counter: {state.count}

;
}
``

Devtool

Install from chrome web store here

!chrome extension