🦊 foxstate-react

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

foxstate-react provides a simple React hook to connect your components with FoxState stores.

📦 Installation

Install FoxState core and React bindings.

npm install fox-state foxstate-react

⚡ Quick Example

"use client"

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

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

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

export default function Counter() {

  const count = useStore(counterStore, s => s.count)

  return (
    <button onClick={counterStore.actions.inc}>
      {count}
    </button>
  )
}

🧠 API

useStore

React hook for subscribing to FoxState stores.

const value = useStore(store, selector)

Parameters

| Parameter | Description | | ---------- | ------------------------ | | store | FoxState store instance | | selector | Function to select state |

Example:

const count = useStore(store, s => s.count)

Only the selected state will trigger re-renders.

⚡ Why use foxstate-react?

• ⚡ Fast updates with signal-based state
• 🧠 Selector tracking for minimal re-renders
• 🧩 Works with FoxState plugin system
• 🔄 Compatible with React 18+

🔗 Related Packages

| Package | Description | | ---------------- | -------------------------- | | fox-state | Core state engine | | foxstate-vue | Vue bindings | | foxstate-svelte | Svelte bindings | | foxstate-vanilla | Vanilla JavaScript adapter |

📜 License

MIT