DEV Community

Nickolay Stepanov (Nick)
Nickolay Stepanov (Nick)

Posted on

Create React forms in a few minutes.

Hi everybody.
We are using a new library for creating a form.

For creating your forms you need to make two simple steps:

  1. Define a scheme which describe validation and some properties of form data.
  2. Connect your scheme via methods to your UI components.

Scheme

// scheme.js
export default {
    valid: null,
    formValue: {
        first_name: "",
        last_name: "",
    },
    rules: {
        first_name: [
            ["empty", "please write your first name"]
        ],
        last_name: [
            ["empty", "please write your last name"]
        ]
    }
}

Enter fullscreen mode Exit fullscreen mode

Form

//MyForm.ts
import {useFormMod} from "formmod";

export const MyForm = () => {
const {setValue, getValue, getError, validate} = useFormMod(
        FORM_SCHEME
 );

return (
<form onSubmit={handlerSubmit}>
…
      <MyTextInput
           label={"First name"}
           value={getValue("first_name")}
           error={getError("first_name")}
           onChange={(value: string) => setValue("first_name", value)}
      />
… 
</form>
);
Enter fullscreen mode Exit fullscreen mode

Full documentation :
https://doc.formmod.org/

**WE RECOMMEND TO USE LAPTOP OR DESKTOP DEVICE FOR READING
DOCUMENTATION.

Advantages:

  • No dependencies. This is the power of simple work.This form system don’t know about your components, JSX, your app, store…You can use it with any UI components. No longer need to make wrappers components, understanding JSX syntax.Just use it with anything.
  • Easy system, easy code. It’s very simple.
  • Save time. Just connect properties to your components.
  • In addition to validation and simple things, the system supports optional, group fields in the form and much more. Just read documentation.

For support us, just set a star in our GitHub page (Thank forward).

https://github.com/nickorsk2017/formMOD
What do you think about this system?
Thank you!

Top comments (1)

Collapse
 
nickorsk2017 profile image
Nickolay Stepanov (Nick)

Please, set a star in gitGub for support us.)))
github.com/nickorsk2017/formMOD