dnd-form-hook v2.4.0

dnd-form-hook

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

How to use

comment: <> (### On Local Computer)

comment: <> (Clone this repo to your local computer, then run:)

comment: <> (- npm install && npm run build)

comment: <> (- To make this component available to other projects on your local computer, run yarn link.)

comment: <> (- Then go to the project where you want to use this package and run yarn link "dnd-form-hook".)

comment: <> (Finally, to fix the multiple copies of React bug that shows up with linked React packages:)

comment: <> (- navigate to the root of the dnd-form-hook package)

comment: <> (- run npm link "../path/to/your/project")

comment: <> (You can now import dnd-form-hook as a normal package installed from npm like so:)

comment: <> (### From Npm Registry)

• 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'
...

comment: <> (## Available props)

comment: <> (`)

comment: <> (className: string (optional))

comment: <> (`)

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