@iniz/react v0.0.0-jsxImportSource-20221012175019

Iniz

Iniz is a reactive state library.

Currently Iniz is still at alpha stage

npm i @iniz/react

• Guide

Guide

npm i @iniz/react

@iniz/react already re-exports @iniz/core

Simply use atom() values in components, they will re-render correctly thanks to useSyncExternalStore

// The component won't re-render when `nestedCounter$.value.obj.array[0].count` is updated

function MessageInput() {
  // Equivalient to `atom()`
  const counter = useAtom(10);

  // Equivalent to `computed()`
  const computedCounter = useComputed(
    () => `Computed: ${nestedCounter$$.value.obj.message}`
  );

  // Equivalent to `effect()`
  // NOTE: You can also use `useEffect` with atoms actually
  useSideEffect(() => {
    console.log("[Latest message] ", computedCounter.value);
  });

  return (
    <div>
      <button onClick={() => counter.value++}>{counter.value}++</button>
      <input
        value={nestedCounter$.value.obj.message}
        onChange={(evt) =>
          (nestedCounter$.value.obj.message = evt.target.value)
        }
      />
    </div>
  );
}