Basic Usage

👉 Basic Usage
           ^{_{Svelte REPL}}

At its most basic, svelte-object uses Svelte- Runes and Context API to create a reactive object like structure between components.

This is what allows us to nest Objects, Arrays and Values.

Simply use bind:value as you do with your everyday Svelte, and provide a name.

In this example, I have a component Input which I imagine most of us will have. However you can also do <input bind:value={obj.name}> if that rocks your boat.

<script lang='ts'>
    import * as I from 'svelte-object'
    import Input from './Input.svelte'

    let pets = $state([])
    let object
	
    function onSubmit(value) { ... }
    
</script>

<I.Object bind:this={object} {onSubmit}>
    <Input name='owner'> Owners name </Input>
    <I.Array name='pets' bind:value={pets}>
        {#snippet item(prop)}
            <I.Object name={prop.index}>
                <Input name='name'> name </Input>
                <Input name='age' type='number'> Age </Input>
            </I.Object>
        {/snippet}
    </I.Array>
</I.Object>
<button onclick={() => pets.push({})}> Add pet </button>
<button onclick={() => object.submit()}> Send </button>