Installation and Usage Guide

Download the library:

site with details, additional info and examples -> https://topchagg.github.io/

npm install reactive-fast-form

Use the custom hook useCreateForm:

const [form, setForm, trigger] = useCreateForm(['name']);

This hook takes the names of future fields as props.

Import the ReactiveForm element:

Use it! It takes an object and a function that returns useCreateForm, and it must have children.

Import the needed field (We’ll use InputField):

Use it with ReactiveForm like this:

<ReactiveForm setObject={form} setFunc={setForm}>
    <div>
        <InputField 
            placeholder="Name" 
            validClass="valid default" 
            invalidClass="invalid default" 
            name="name" 
            isTrigger
        />
    </div>
</ReactiveForm>

Every field requires the name prop.

name is a prop that specifies by what key you can get the value of this field from form.

isTrigger is a prop that must be present on one field of the entire form!

Create a submit button and use the setGlobalObject handler:

`<button onClick={() => setGlobalObject(setForm)} className='btn'>Submit</button>`

This function takes a function returned from useCreateForm as a prop.

Use the custom hook useActionOnSubmit to handle the button click:

This function takes a callback function and trigger returned from useCreateForm as props.

Here’s the full code:

import { useCreateForm, InputField, useActionOnSubmit, setGlobalObject, ReactiveForm } from "reactive-fast-form";

const DefaultInputFieldExample = () => {
    const [form, setForm, trigger] = useCreateForm(["name"]);

    useActionOnSubmit(() => {
        alert(JSON.stringify(form["name"]));
    }, trigger);

    return (
        <>
            <ReactiveForm setObject={form} setFunc={setForm}>
                <div>
                    <InputField 
                        placeholder="Name" 
                        validClass="valid default" 
                        name="name" 
                        isTrigger
                    />
                </div>
            </ReactiveForm>
        </>
    );
};


export default DefaultInputFieldExample;

For more information and details, you can refer to the docs.

Attention! The library is still raw, has many bugs, and the site is also raw! I plan to complete this library closer to September!

P.S. Sorry for my bad English; I hope you understood everything.

site with details, additional info and examples -> https://topchagg.github.io/