jotai-capsule

An alternative approach to scoping Jotai atoms.
A capsule is used as a namespace for atoms. By wrapping a component with a capsule provider, a new scope is created.

1import {atom} from 'jotai'
2import {createCapsule} from 'jotai-capsule'
3
4const counterCapsule = createCapsule()
5
6const nameAtom = counterCapsule(atom(''))
7const countAtom = counterCapsule(atom(0))
8
9const Counter = counterCapsule.provide(({name}) => {  
10  useHydrateAtoms([
11    [nameAtom, name]
12  ])
13  const [count, setCount] = useAtom(countAtom)
14  return (
15    <div>
16      <CounterName />
17      <button onClick={() => setCount((c) => c + 1)}>increment</button>
18      <div>count: {count}</div>
19    </div>
20  )
21})
22
23const CounterName = () => {
24  const name = useAtomValue(nameAtom)
25  return <div>name: {name}</div>
26}
27
28const App = () => (
29  <div>
30    <h1>Each Counter is wrapped in a new scope</h1>
31    <Counter name="counter 1" />
32    <Counter name="counter 2" />
33  </div>
34)

Api

1interface Capsule {
2  /** Scope this atom */
3  (atom: Atom): Atom
4  /** Wrap this component in a provider */
5  provide(component: FunctionComponent): FunctionComponent
6}