# svelte-valtio

> `svelte-valtio` serves as a wrapper for valtio, enabling its use within Svelte. The stores created by it can be interchangeably utilized with Svelte's native stores.

Latest version **0.0.3** (published 2023-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-valtio
pnpm add svelte-valtio
yarn add svelte-valtio
bun add svelte-valtio
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2023-06-26 |
| First published | 2023-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 11.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | samialsubhi |

## Links

- npm: https://www.npmjs.com/package/svelte-valtio
- npm.io page: https://npm.io/package/svelte-valtio

## Dependencies (1)

- [valtio](https://npm.io/package/valtio.md) ^1.10.6

## Recent versions

- 0.0.3 (latest) — 2023-06-26
- 0.0.2 — 2023-06-26
- 0.0.1 — 2023-06-26

## README

# svelte-valtio

`svelte-valtio` serves as a wrapper for valtio, enabling its use within Svelte. The stores created by it can be interchangeably utilized with Svelte's native stores.

## proxyWritable store

The proxyWritable store is similar to Svelte's writable store but it's powered by Valtio's proxy. You can use it in the same way as Svelte's writable.

```js
import {proxyWritable} from "svelte-valtio"

const count = proxyWritable(0)
```

## proxyReadable store

The proxyReadable store mimics the behavior of Svelte's readable store.

```js
import {proxyReadable} from "svelte-valtio"

const config = proxyReadable({env:"PROD",port:1000})
```

## proxyDerived store

proxyDerived store can be used in the same manner as Svelte's derived store. However, this variant has a Valtio proxy incorporated within it. It can accommodate any stores, irrespective of whether they are created using svelte-valtio or svelte/store.

```js
import {proxyWritable, proxyDerived} from "svelte-valtio"
import {writable} from "svelte/store"

const id = proxyWritable(1)
const users = writable([
    {id:1, name:"sami"},
    {id:2, name:"alsubhi"}
])

const selectedUser = proxyDerived([id, users], ($id, $users)=>{
    return $users.find((user)=>user.id === $id)
})
```

## Usage In Components
You can easily integrate these stores into your Svelte components. Here's an example where we bind the id to an input field and display the selected user.
```svelte
<script>
import {proxyWritable, proxyDerived} from "svelte-valtio";
import {writable} from "svelte/store";

const id = proxyWritable(1);
const users = writable([
    {id: 1, name: "sami"},
    {id: 2, name: "alsubhi"}
]);

const selectedUser = proxyDerived([id, users], ($id, $users) => {
    return $users.find((user) => user.id === $id);
});
</script>

<div>
    <input type="number" bind:value={$id} min="1" max="2">
    <p>Selected User: {$selectedUser ? $selectedUser.name : 'User not found'}</p>
</div>
```
In this example, the id value changes as the user types into the input field. This triggers the selectedUser store to automatically update and display the name of the selected user. If the id doesn't correspond to any user in the users store, 'User not found' is displayed.


## Listening to Part of a Store

With Svelte-Valtio, you can establish reactivity on specific sections of a store. This feature is applicable to `proxyWritable`, `proxyReadable`, and `proxyDerived` stores. The reactivity triggers only when changes occur in the part of the store you are listening to.

Consider the following example with a `proxyWritable` store:

```js
import {proxyWritable} from "svelte-valtio";

const carCompany = proxyWritable({
    name: 'Tesla',
    model: 'Model 3',
    year: 2023,
    batterySizes: ['Standard', 'Long Range', 'Performance']
});
```

In order to listen for changes in a specific key within the store, you can use the `selectKey` function. For instance, to listen to the `model` key, you would set up as follows:

```js
const modelName = carCompany.selectKey((v) => v, "model");
```

In this case, `modelName` is a `proxyReadable` store that only reacts to changes in the `model` key of the `carCompany` store. Modifications to other keys such as `name`, `year`, or `batterySizes` will not initiate updates in `modelName`.

Similarly, to listen to a particular object within the store, you can employ the `select` function. To listen to the `batterySizes` object, you can set it up like so:

```js
const batterySizes = carCompany.select((v) => v.batterySizes);
```

Here, `batterySizes` is a `proxyReadable` store that will only respond to alterations in the `batterySizes` list within the `carCompany` store. Changes to other keys will not impact `batterySizes`. This provides more granular control over your reactivity system, ensuring efficient updates.

---
_Source: https://npm.io/package/svelte-valtio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._