lit-form

lit-form is high-ordered component for lit-html (actually for lit-extended) that implement Formik API for working with HTML forms.

Example

import {html, render} from 'lit-html/lib/lit-extended';
import {withForm} from 'lit-form';

const userFormView = withForm({
    mapPropsToValues: ({user}) => user,
    onSubmit: (values, {props}) => props.onSave(values),
})(
    ({
        values,
        handleSubmit,
        handleChange,
    }) => html`
        <form onsubmit="${ handleSubmit }">
            <input
                type="text"
                name="name"
                value="${ values.name }"
                onchange="${ handleChange }"
            />
            <button>${ values.id ? 'Update': 'Add' }</button>
        </form>
    `
);

render(
    html`
        ${ userFormView({
            user: {
                id: null,
                name: 'User name',
            },
            onSave: user => {
                console.log(user);
            },
        }) }
    `,
    document.body
);

Live demo

Current progress

• Implemented collecting data from inputs and pass it to onSubmit

Other related projects

• lit-html - lit-html lets you write HTML templates with JavaScript template literals, and efficiently render and re-render those templates to DOM
• lit-redux - is react-redux API implementation for lit-html library
• lit-todo-example - lit-html + lit-redux + lit-form