Provider

Wraps a React subtree with a valdres store. Optional — without a Provider, all hooks use a default global store.

Usage

import { Provider } from "valdres-react"

function App({ children }) {
    return <Provider>{children}</Provider>
}

With a custom store

Create a store with store() from valdres and pass it to the Provider:

import { store } from "valdres"
import { Provider } from "valdres-react"

const myStore = store()

function App({ children }) {
    return <Provider store={myStore}>{children}</Provider>
}

Multiple stores

You can nest Providers to isolate state between different parts of your app:

function App() {
    return (
        <Provider>
            <Header />
            <Provider>
                <EditorPanel />
            </Provider>
        </Provider>
    )
}

When to use a Provider

A <Provider> is required — useAtom, useValue, and the other hooks throw No <Provider> found if there isn't one above them in the tree.

• Without a store prop: <Provider> creates a store for you (with batchUpdates enabled). Fine for most apps.
• With a store prop: you pass a store you created yourself, giving you control over its lifecycle and isolation — useful for testing, micro-frontends, SSR, or independent state trees.

For state access outside React (scripts, tests, cross-framework code), use the globalStore exported from valdres.

See also

• store — create a store instance
• useStore — access the current store