AutoSave utility

AutoSave utility is simple solution to trigger action whenever something new happened to the values inside created Form.

This feature is wrapped in throttle solution so you can setup the delay between user action to catch and then trigger the onAutoSave method.

In the example, with 2 sec throttle, you can see the log in the console with the form values.

type FormTypeProps = {
   // ... rest of the Form props,
    onAutoSave?: (formValues: Record<string, any>) => void;
    autoSaveThrottleDelay?: number;
}

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const autoSaveAction = (formValues) => console.log('autosave', formValues); const schema: FormSchema = { text: { type: 'text', fieldWrapperProperties: { className: 'mb-2' }, } } render ( <FormWrapper schema={schema} onSubmit={onSubmit} onAutoSave={autoSaveAction} autoSaveThrottleDelay={2000} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const autoSaveAction = (formValues) => console.log('autosave', formValues);
const schema: FormSchema = {
    text: {
        type: 'text',
        fieldWrapperProperties: { className: 'mb-2' },
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
        onAutoSave={autoSaveAction}
        autoSaveThrottleDelay={2000}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result