dnd-form-hook

A React hook that can make your form state hassle-free with the very customized form controls.

How to use

• npm install dnd-form-hook --save

import useForm from 'dnd-form-hook'
...

You can also import the Validators which has some utility methods to validate:

import useForm, { Validators } from 'dnd-form-hook'
...

You will have an object in return from the useForm({...}) hook and the properties are given below:

// your-component.js
import useForm, { Validators } from 'dnd-form-hook'

... // Some more imports or global stuff

export default function YourComponent() {
    const {values, errors, handleChange, handleBlur, dirty, touched, patchValue} = useForm({
        controls: {
            name: [
                "", // Default Value
                [Validators.req(), // ... more validators]
            ],
            //... more form controls
        }
    });
    
    return ... // Some JSX
}

errors, dirty, patchValue, handleChange, handleBlur, touched and values are in the same format with the controls as keys

You can create you own custom validators as well:

import useForm, { Validators, ValueControl } from 'dnd-form-hook'

...

// Make sure to return string | null otherwise you will have some type errors
function customValidator(value: string, values: ValueControl): string | null {
    return value === "custom" ? "Do this" : null;
}

// Or if you want to pass some custom message, you can use closure as well

This hook was built for making react forms easy and flexible