Primitive and flexible state management for Solid based on Jotai.
Install it:
pnpm add jotai solid-jotaiUse it:
import { atom, useAtom } from 'solid-jotai'
const countAtom = atom(0)
function Counter() {
const [count, setCount] = useAtom(countAtom)
return (
<div>
<h1>{count()}</h1>
<button onClick={() => setCount(c => c + 1)}>one up</button>
</div>
)
}An atom represents a piece of state. All you need is to specify an initial value, which can be primitive values like strings and numbers, objects and arrays. You can create as many primitive atoms as you want.
import { atom } from 'solid-jotai'
const countAtom = atom(0)
const countryAtom = atom('Japan')
const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka'])
const mangaAtom = atom({ 'Dragon Ball': 1984, 'One Piece': 1997, 'Naruto': 1999 })
// Derived atoms
const doubledCountAtom = atom(get => get(countAtom) * 2)
const sum = atom(get => get(countAtom) + get(doubledCountAtom))
// Async atoms
const asyncAtom = atom(async () => 'hello')You can make the read function an async function and leverage <Suspense />:
const urlAtom = atom('https://jsonplaceholder.typicode.com/todos')
const fetchUrlAtom = atom(
async (get) => {
const response = await fetch(get(urlAtom))
return await response.json()
}
)
function TodoList() {
const [json] = useAtom(fetchUrlAtom)
// json is a resource so loading, status
// and error props are available
return <div>{JSON.stringify(json())}</div>
}
function App() {
return (
<Suspense fallback={<Loading />}>
<TodoList />
</Suspense>
)
}Read more about Jotai here.
MIT