Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

ufukbakan/useFormData-hook

Repository files navigation

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

AltStyle によって変換されたページ (->オリジナル) /