lit-html-input-sync v1.0.4

lit-html-input-sync

Sync input events to your state.

Overview

lit-html-input-sync let's you sync values from input elements to your global or local state.

This package uses lit-html directives to establish a two way sync between an input value and the state object.

using syncObj

import { html, render } from 'lit-html';
import { syncObj } from 'lit-html-input-sync';

const a = {
    text1: "Hello World!",
    list: [
        {
            text2: "Hello lit-html!"
        }
    ]
}

//Create two different text input, which sync to different object values.
const template = html`
<input type="text" @input="${syncObj("text1", a)}">
<input type="text" @input="${syncObj("list[0].text2", a)}">`;

render(template, document.body);

get the new value, after the user changed the input value

import { html, render } from 'lit-html';
import { syncObj } from 'lit-html-input-sync';

const a = {
    text1: "Hello World!",
}

//Create two different text input, which sync to different object values.
const template = html`
<input type="text" 
    @input="${syncObj("text1", a, (nv: string) => console.log("The new value is: " + nv))}">`;
    
render(template, document.body);

using sync

import { html, render } from 'lit-html';
import { sync } from 'lit-html-input-sync';

const a = {
    text1: "Hello World!",
}

//Create two different text input, which sync to different object values.
const template = html`
<input type="text" @input="${sync(a.text1, (nv: string) => a.text1 = nv)}">`;

render(template, document.body);

Directive signatures

sync(initialValue: string, setHdl: (nv: string) => void)

syncObj(accessPath: string, obj: any, update?: (nv: string) => void)