https://github.com/wobsoriano/solid-jotai

Primitive and flexible state management for Solid based on Jotai.
https://github.com/wobsoriano/solid-jotai

jotai solidjs

Last synced: 29 days ago
JSON representation

Primitive and flexible state management for Solid based on Jotai.

• Host: GitHub
• URL: https://github.com/wobsoriano/solid-jotai
• Owner: wobsoriano
• License: mit
• Created: 2022-12-06T19:01:26.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-20T19:48:13.000Z (3 months ago)
• Last Synced: 2024-11-07T16:50:57.943Z (about 1 month ago)
• Topics: jotai, solidjs
• Language: TypeScript
• Homepage:
• Size: 344 KB
• Stars: 29
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Solid Jotai

README

        


  



# solid-jotai

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)

Primitive and flexible state management for Solid based on [Jotai](https://github.com/pmndrs/jotai).

## Quick start

Install it:

```bash

pnpm add jotai solid-jotai

```

Use it:

```tsx

import { atom, useAtom } from 'solid-jotai'

const countAtom = atom(0)

function Counter() {

  const [count, setCount] = useAtom(countAtom)

  return (

    


      
{count()}

       setCount(c => c + 1)}>one up

    

  )

}

```


## Atom

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.

```ts

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')

```

## Suspense

You can make the read function an async function and leverage [``](https://www.solidjs.com/docs/latest/api#suspense):

```tsx

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 
{JSON.stringify(json())}

}


function App() {

  return (

    }>

      

    

  )

}

```

Read more about [Jotai](https://github.com/pmndrs/jotai) here.

## License

MIT