generated fromsolidjs-community/solid-lib-starter
- Notifications
You must be signed in to change notification settings - Fork6
Primitive and flexible state management for Solid based on Jotai.
License
NotificationsYou must be signed in to change notification settings
wobsoriano/solid-jotai
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Primitive and flexible state management for Solid based onJotai.
Install it:
pnpm add jotai solid-jotai
Use it:
import{atom,useAtom}from'solid-jotai'constcountAtom=atom(0)functionCounter(){const[count,setCount]=useAtom(countAtom)return(<div><h1>{count()}</h1><buttononClick={()=>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'constcountAtom=atom(0)constcountryAtom=atom('Japan')constcitiesAtom=atom(['Tokyo','Kyoto','Osaka'])constmangaAtom=atom({'Dragon Ball':1984,'One Piece':1997,'Naruto':1999})// Derived atomsconstdoubledCountAtom=atom(get=>get(countAtom)*2)constsum=atom(get=>get(countAtom)+get(doubledCountAtom))// Async atomsconstasyncAtom=atom(async()=>'hello')
You can make the read function an async function and leverage<Suspense />:
consturlAtom=atom('https://jsonplaceholder.typicode.com/todos')constfetchUrlAtom=atom(async(get)=>{constresponse=awaitfetch(get(urlAtom))returnawaitresponse.json()})functionTodoList(){const[json]=useAtom(fetchUrlAtom)// json is a resource so loading, status// and error props are availablereturn<div>{JSON.stringify(json())}</div>}functionApp(){return(<Suspensefallback={<Loading/>}><TodoList/></Suspense>)}
Read more aboutJotai here.
MIT
About
Primitive and flexible state management for Solid based on Jotai.
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published