# ValdresScope

Signature
`<ValdresScope scopeId?: string, initialize?: InitializeCallback>`

valdres-solid
Create an isolated child store for a Solid subtree

Creates a scoped store that inherits state from the parent but can override values independently. Components inside the scope read and write to the scoped store.

## Usage

```tsx
import { ValdresProvider, ValdresScope } from "valdres-solid"

function App() {
    return (
        <ValdresProvider>
            <MainContent />
            <ValdresScope scopeId="modal">
                <ModalContent />
            </ValdresScope>
        </ValdresProvider>
    )
}
```

## Props

| Prop         | Type                               | Description                                     |
| ------------ | ---------------------------------- | ----------------------------------------------- |
| `scopeId`    | `string`                           | Optional identifier. Auto-generated if omitted. |
| `initialize` | `(txn) => void \| [Atom, value][]` | Optional callback to set initial values.        |
| `children`   | `JSX.Element`                      | Components that will use the scoped store.      |

## Initializing state

```tsx
<ValdresScope
    scopeId="edit-form"
    initialize={txn => {
        txn.set(nameAtom, "Draft")
        txn.set(emailAtom, "")
    }}
>
    <EditForm />
</ValdresScope>
```

## Cleanup

The scope is automatically cleaned up when the component is removed from the DOM.

## See also

- [Scoped Stores](https://valdres.dev/guides/scoped-stores) — full guide on scoped stores
- [ValdresProvider](https://valdres.dev/solid/ValdresProvider) — provide a store to your component tree