Valdres

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

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

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

Props

PropTypeDescription
scopeIdstringOptional identifier. Auto-generated if omitted.
initialize(txn) => void | [Atom, value][]Optional callback to set initial values.
childrenJSX.ElementComponents that will use the scoped store.

Initializing state

<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