ginwa-form v1.0.2

Ginwa form

My first lib, my simple way to use form in react :D

Install

npm i ginwa-form

Usage

function App() {
    const { data, dataErr, setUpForm, resetForm, validate } = useForm<{ input1: string }>({
        defaultValue: {
            input1: "",
        },
        rules: {
            input1: {
                validator: (val) => {
                    let listErrMsg: string[] = []
                    if (!val) {
                        listErrMsg = [...listErrMsg, "input1 cannot be empty"]
                    }

                    if (listErrMsg.length > 0) {
                        return Promise.reject(listErrMsg)
                    }
                    return Promise.resolve()
                },
            },
        },
        showErrOnChange: { // showErrOnChange mean validator always trigger if value true
            input1: true,
        },
    })

    const onBtnClick = async () => {
        const isErrForm = (await validate()).valueOf()
        if (isErrForm) return
        const input1 = data.form.input1
        // do your logic
    }

    const onBtnClickResetForm = () => {
        resetForm() // reset form to defaultValue
    }

    const onBtnClickClearForm = () => {
        clearForm({names: ["input1"]}) // clear spesific form
    }
    return (
        <div>
        <input type="text"{...setUpForm({name: "input1",})} />
        <br>
        <div>{dataErr({ name: "input1" }).at(0)?.msg}</div>
        </div>
    );
}