Neuron

Global State Manager

Count: 0


 <p>Count: <span id="count">0</span></p>
 <button id="incrementBtn" onclick="increment()">Increment</button>

 <script>
   window.onload = (event) => {

     const Store = Neuron.createStore();

     Store.add({
       key: "counter",
       state: 0,
     });

     function increment() {
       Store.set("counter", (prev) => prev + 1);
     }

     const counter = document.querySelector("#count");

     Store.onDispatch((payload) => {
       if (payload.key === "counter") {
         counter.innerHTML = payload.state;
       }
     });

   };
 </script>


import {createStore} from '@sandstack/neuron/react'

const {State, useNeuron} = createStore();

function Store(){
  return(
    <>
     <State name={'counter'} state={0}/>
    </>
  )
}
function Comp(){
  const [count, setCount] = useNeuron('counter')

  return(
    <>
     <p>Count: {count}</p>
     <button onClick={() => setCount((prev) => prev + 1)}>
      Add
     </button>
    </>
  )
}


import Neuron from '@sandstack/neuron/react'

interface State{
    counter: number
}

const {State, useNeuron} = Neuron.Store<State>();

function Store(){
  return(
    <>
     <State<number> name={'counter'} state={0}/>
    </>
  )
}
function Comp(){
  const [count, setCount] = useNeuron<number>('counter')

  return(
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>
      Add
      </button>
    </>
  )
}