🦊 foxstate-svelte

Svelte bindings for FoxState, a lightweight signal-powered state management library.

foxstate-svelte allows Svelte components to subscribe to FoxState stores using native Svelte stores.

📦 Installation

Install FoxState core and Svelte bindings.

npm install fox-state foxstate-svelte

⚡ Quick Example

Create Store

import { createStore } from "fox-state"
import { useStore } from "foxstate-svelte"

const counter = createStore({
  state: { count: 0 },

  actions: {
    inc: ({ setState, getState }) =>
      setState({ count: getState().count + 1 })
  }
})

export const counterStore = useStore(counter)

Use in Svelte Component

<script>
  import { counterStore } from "./store.js"
  import { counter } from "./store.js"
</script>

<button on:click={counter.actions.inc}>
  {$counterStore.count}
</button>

🧠 API

useStore

Creates a reactive Svelte store connected to FoxState.

const state = useStore(store)

Example:

const state = useStore(counter)

Access state inside component:

{$state.count}

🔗 Related Packages

| Package | Description | | ---------------- | ----------------- | | fox-state | Core state engine | | foxstate-react | React bindings | | foxstate-vue | Vue bindings | | foxstate-vanilla | Vanilla adapter |

📜 License

MIT