@ivbrajkovic/simple-state v1.5.1

:zap: Simple reactive state

Ultra fast, ultra simple, zero configuration and zero dependency

Simple state management that can be used for sharing reactive properties among component on deferent position and level in tree branch without need for context or providers. Just import a hook and use it in every component you need and only this component will rerender on change.

Hook usage is similar to well known useState hook :wink:

🚀 Demo - Codesandbox basic example

Basic usage

Store module

// store.js
import { makeObservable, useSimpleState } from "@ivbrajkovic/simple-state";

// This can be an object with many properties
const store = makeObservable({ name: "Mr. Bean", clickCounter: 0 });

// Select property you want to observer
export const useSimpleStore = (select) => {
  return useSimpleState(store, select);
};

// Select multiple property you want to observer
export const useSimpeStoreMulti = (selectors) => {
  return useSimpleStateMulti(store, selectors);
};

Some component

// Component.js
import { useSimpeStore } from "./useSimpleStore";

const Component = () => {
  const [count, setCount] = useSimpeStore("clickCounter");
  
  return <div>
    <button onClick={() => setCount(count + 1)}>Incerment</button>
    <div>{count}</div>
  </div>
}

export default Component

Some other component

// Component.js
import { useSimpeStoreMulti } from "./useSimpleStore";

const Component = () => {
  const [{ name, clickCounter }, setSimpleState] = useSimpeStoreMulti([
    "name",
    "clickCounter"
  ]);
  
  return <div>
    <button onClick={() => setCount("name", "Gandalf the Grey"}>Set name</button>
    <button onClick={() => setCount("clickCounter", clickCounter + 1)}>Incerment</button>
    <div>name: {name}, clicks: {clickCounter}</div>
  </div>
}

export default Component

API

• makeObservableSelect - initialize observable object, accept object to observe and return observable

const observable = makeObservableSelect(object);

• useSimpleState - listen for change on observable

const [state, setSimpleState] = useSimpleState(selector: string, onChange?);

• useSimpleStateMulti - listen for change on observable with multiple selectors

const [state, setSimpleState] = useSimpleStateMulti(selectors: string[], onChange?);

:checkered_flag: TODO

1. Add multiple selector :heavy_check_mark:
2. Add reference equality check