# fromState

Signature
`fromState<T>(state: Atom<T> | Selector<T>, store?: Store): FromStateAtom<T> | FromStateValue<T>`

valdres-svelte
Reactive read/write box for an atom (read-only for selectors)

Bridges a valdres atom or selector into a Svelte 5 reactive box. Reading `.current` inside an effect — a template expression, `$derived`, `$effect` — subscribes to the state and re-runs that effect when it changes. For an atom the box is writable, so `bind:value` and `count.current++` just work; for a selector (or any read-only state) `.current` is read-only.

## Usage

```svelte
<script lang="ts">
    import { atom } from "valdres"
    import { fromState } from "valdres-svelte"

    const countAtom = atom(0)
    const count = fromState(countAtom)
</script>

<p>Count: {count.current}</p>

<button onclick={() => count.current++}>Increment</button>
<button onclick={() => count.update(c => c + 1)}>Increment (updater)</button>
<button onclick={() => count.reset()}>Reset</button>

<!-- two-way binding writes straight back to the atom -->
<input type="number" bind:value={count.current} />
```

The second `store` argument defaults to the store from [setValdresContext](https://valdres.dev/svelte/setValdresContext) / [scope](https://valdres.dev/svelte/scope), resolved via [getValdresContext](https://valdres.dev/svelte/getValdresContext). Because context is only available during component initialization, pass an explicit `store` to use the box in plain `.svelte.ts` module state or during SSR.

## Returns

For an **atom** (`FromStateAtom<T>`):

| Member    | Type                                   | Description                                                               |
| --------- | -------------------------------------- | ------------------------------------------------------------------------- |
| `current` | `T`                                    | Tracked read and write (`box.current = v`, `box.current++`, `bind:value`) |
| `update`  | `(updater: (current: T) => T) => void` | Read-modify-write, mirroring `svelte/store`'s `Writable.update`           |
| `reset`   | `() => void`                           | Reset the atom to its default value                                       |

For a **selector** (`FromStateValue<T>`): a read-only `current`. Async selectors surface as `current: T | Promise<T>` — see the async note below.

## Async selectors

Core erases asyncness, so `fromState(asyncSelector).current` is typed `T | Promise<T>`. Consume it with Svelte's `{#await}` block, or reach for [resourceState](https://valdres.dev/svelte/resourceState) when you want `loading` / `error` flags:

```svelte
<script lang="ts">
    import { fromState } from "valdres-svelte"
    import { userSelector } from "$lib/state"

    const user = fromState(userSelector)
</script>

{#await user.current then u}
    <p>Hello {u.name}</p>
{/await}
```

> **Lazy bootstrap**
>
>
> The box is built on Svelte's `createSubscriber` (the primitive behind `MediaQuery`), so the underlying subscription is lazy: it starts on the first effect that reads `.current`. A valdres `onMount`-driven atom — the [@valdres/browser-\*](https://valdres.dev/svelte/plugins/browser-online) packages — therefore bootstraps only once `.current` is read in the template or an effect. If a component reads the value solely from an event handler, start the subscription with a throwaway effect: `$effect(() => void box.current)`.

## See also

- [toStore](https://valdres.dev/svelte/toStore) — Svelte store-contract bridge for `$`-syntax
- [resourceState](https://valdres.dev/svelte/resourceState) — async selectors with `loading` / `error`
- [setValdresContext](https://valdres.dev/svelte/setValdresContext) — provide a store to the component tree