Faumally

Install

pnpm add faumally xstate

Usage

import Faumally from "faumally";

type Form = {
    age: number;
    email: string;
    address: string;
    lastName: string;
    firstName: string;
}

const createUser = (user: any) => Promise.resolve();

const config = {required: true}

const {submit, handlers, subscribe} = Faumally<Form>({
    schema: {
        email: config,
        lastName: config,
        firstName: config,
        address: 'string',
        age: {
            ...config,
            initialValue: 0
        },
    },
    onSubmit(data) {
        return createUser(data);
    }
})

subscribe(({data, error, errors, values, submit, isSubmitting, attemptedSaveOrSubmit}
) => {
    // do stuff anytime form state changes
    ...
})

Return type

---

name	summary
handlers	object containing event handlers corresponding to each item in the provided schema
subscribe	subscription function for changes to form state
service	the internal XState service behinde the form
onChange	generic form field edit event handler
onBlur	generic form field edit done event handler
validate	validate specific form field
generateHandlers	Handlers would not be generated in situation where schema is async e.g from an API request. You'd need to update and generate the handlers manually
set	set values dynamically. Avaliable options are: data, error, errors, values and schema

Example

const form = document.querySelector('form');
const email = form.querySelector('.email');
const age = form.querySelector('.age');
...

age.addEventListener('input', ({target: {value}}) => {
    handlers.age.onChange(value);
    // or
    onChange('age', value)
})

form.addEventListener('submit', e => {
    e.preventDefault();
    submit();
})

subscribe(({data, error, errors, values, isSubmitting, attemptedSaveOrSubmit}
) => {
    if (isSubmitting) alert('submitting form')

    if (attemptedSaveOrSubmit) {
        alert('Please fill all required fields')
    }
})