Atom

⚠️

<Atom/> is experimental feature, this interfaces could be changed

The Atom component provides the same props interface as Jotai's useAtom (opens in a new tab) hook and can be used declaratively.

props.atom

You can use Jotai's atom as is.

import { Atom } from '@suspensive/jotai'
import { atom } from "jotai";
 
const countAtom = atom(1);
 
const Example = () => (
  <Atom atom={countAtom}>
    {([count, setCount]) => (
      <>
        <div>count: {count}</div>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </>
    )}
  </Atom>
)

For Async Atom, you can handle the loading state using Suspense.

import { Atom } from '@suspensive/jotai'
import { Suspense } from '@suspensive/react'
import { atom } from "jotai";
 
const countAtom = atom(1)
const asyncDoubleCountAtom = atom(async (get) => {
  await delay(2000)
  return get(countAtom) * 2
})
 
const Example = () => (
    <Suspense fallback={'pending...'}>
      <Atom atom={asyncDoubleCountAtom}>
        {([count]) => (
          <>count: {count}</>
        )}
      </Atom>
    </Suspense>
)

Installation <AtomValue/>