Octane Example: Atoms

GitHub StackBlitz CodeSandbox

import { createRoot } from 'octane'
import {
  createAtom,
  useAtom,
  // useCreateAtom,
  useSelector,
} from '@tanstack/octane-store'

// Optionally, you can create atoms outside of Octane components at module scope
const countAtom = createAtom(0)

function App() @{
  // or define atoms inside of components with hook variant. You would have to pass atom as props or use store context though.
  // const countAtom = useCreateAtom(0)

  <main>
    <h1>Octane Atom Hooks</h1>
    <p>
      This example creates a module-level atom and reads and updates it with
      the Octane hooks.
    </p>
    <AtomValuePanel />
    <AtomButtons />
    <AtomStepper />
  </main>
}

function AtomValuePanel() @{
  const count = useSelector(countAtom) // useSelector with no selector re-renders when the value changes. Useful for read-only access to an atom.

  <p>Total: {count}</p>
}

function AtomButtons() @{
  <div>
    <button type="button" onClick={() => countAtom.set((prev) => prev + 1)}>
      Increment
    </button>
    <button type="button" onClick={() => countAtom.set(0)}>
      Reset
    </button>
  </div>
}

function AtomStepper() @{
  const [count, setCount] = useAtom(countAtom) // read and write access to the atom. Re-renders when the value changes.

  <div>
    <p>Editable count: {count}</p>
    <button type="button" onClick={() => setCount((prev) => prev + 5)}>
      Add 5 with useAtom
    </button>
  </div>
}

const target = document.getElementById('root')
if (!target) throw new Error('Missing #root')
createRoot(target).render(App)