https://github.com/hunghg255/sveltejs-jotai

Svelte Jotai State Management
https://github.com/hunghg255/sveltejs-jotai

jotai npm state-management sveltejs

Last synced: 3 months ago
JSON representation

Svelte Jotai State Management

• Host: GitHub
• URL: https://github.com/hunghg255/sveltejs-jotai
• Owner: hunghg255
• License: mit
• Created: 2023-09-12T15:04:50.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-01T14:51:49.000Z (11 months ago)
• Last Synced: 2024-09-29T11:54:05.957Z (3 months ago)
• Topics: jotai, npm, state-management, sveltejs
• Language: TypeScript
• Homepage: https://stackblitz.com/edit/vitejs-vite-myurs9?file=src%2FApp.svelte
• Size: 160 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sveltejs-jotai

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

Experimental. Check [this](https://github.com/pmndrs/jotai/discussions/1514) for more info.

## Demo

[Demo](https://stackblitz.com/edit/vitejs-vite-myurs9?file=src%2FApp.svelte)

## Installation

```bash

pnpm add jotai sveltejs-jotai

```

## Usage

```ts

import { atom } from 'sveltejs-jotai';

export const countAtom = atom(0);

```

```html

  import { useAtom } from 'sveltejs-jotai'

  import { countAtom } from './atoms'

  const count = useAtom(countAtom)

 count.update(prev => prev + 1)}>

  Clicks: {$count}

```

## 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 'sveltejs-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');

```

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

## License

MIT