AtomValue

⚠️

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

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

props.atom

The atom prop behaves the same as Jotai's atom interface.

import { AtomValue } from '@suspensive/jotai'
import { atom } from "jotai";
 
const countAtom = atom(1);
 
const Example = () => (
  <AtomValue atom={countAtom}>
    {(count) => (
      <>count: {count}</>
    )}
  </AtomValue>
)

For async atoms, you can handle the loading state using Suspense.

import { AtomValue } from '@suspensive/jotai'
import { Suspense } from '@suspensive/react'
import { atom } from "jotai";
 
const countAtom = atom(1)
const asyncAtom = atom(async (get) => get(countAtom) * 2)
 
const Example = () => (
  <Suspense fallback={'loading...'}>
    <AtomValue atom={asyncAtom}>
      {(count) => (
        <>count: {count}</>
      )}
    </AtomValue>
  </Suspense>
)