useformdata-hook
TypeScript icon, indicating that this package has built-in type declarations

2.2.0 • Public • Published

useFormData

Get and validate form data without converting each input to a controlled one.

Statements Branches Functions Lines

Simple usage

This hook will scan only one form. By default it is the first form in the page, but you can change it to any form by passsing an argument.

import useFormData from "useformdata-hook";

export default function App() {

    const formData = useFormData();

    return (
        <form>
            <input type='text' name='fullName' /><br/>
            <input type='date' name='birthdate' /><br/>
            <textarea name='comment'>
        </form>
    )
}

Advanced Usage

import { useRef } from "react";
import useFormData from "useformdata-hook";

export default function App() {

    const formRef = useRef(null);
    const formData = useFormData({form: formRef.current});

    useEffect(()=>{
      // console.log(formData);
      // Validation logic goes here
    }, [formData])

    return (
        <form ref={formRef}>
            <input type='text' name='fullName' />
            <input type='date' name='birthdate' />
        </form>
    )
}

Typescript example provided here

Package Sidebar

Install

npm i useformdata-hook

Weekly Downloads

2

Version

2.2.0

License

MIT

Unpacked Size

18.9 kB

Total Files

5

Last publish

Collaborators

  • ufukbakan