⚡ 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 😉

---

🚀 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);

Param	Default	Required	Description
object	{ }	yes	object to observe

Returns	Description
object	observable object

• useSimpleState - listen for change on observable

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

Parame	Type	Default	Required	Description
selector	string	-	yes	property to oberve
callback	fnction	-	no	onChange callback called with changed value if provided hook will not rerender

Returns	Type	Description
state	unknown	observed value
setSimpleState	function	update observed value

• useSimpleStateMulti - listen for change on observable with multiple selectors

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

Parame	Type	Default	Required	Description
selectors	array	-	yes	properties to oberve
callback	function	-	no	onChange callback called with property name and changed value if provided hook will not rerender

Returns	Type	Description
state	object	observed values
setSimpleState	function	update observed value

🏁 TODO

1. Add multiple selector ✔️
2. Add reference equality check