https://github.com/ufukbakan/useformdata-hook

React hook for uncontrolled input forms.
https://github.com/ufukbakan/useformdata-hook

controlled-components form forms hook hooks input input-field javascript react reactjs semicontrolled-component typescript uncontrolled-components

Last synced: about 16 hours ago
JSON representation

React hook for uncontrolled input forms.

• Host: GitHub
• URL: https://github.com/ufukbakan/useformdata-hook
• Owner: ufukbakan
• Created: 2022-11-28T15:00:58.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-16T10:20:00.000Z (over 1 year ago)
• Last Synced: 2024-04-26T00:05:32.845Z (5 months ago)
• Topics: controlled-components, form, forms, hook, hooks, input, input-field, javascript, react, reactjs, semicontrolled-component, typescript, uncontrolled-components
• Language: JavaScript
• Homepage:
• Size: 54.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
useFormData

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


![Statements](https://img.shields.io/badge/statements-98.64%25-brightgreen.svg?style=flat) ![Branches](https://img.shields.io/badge/branches-84.26%25-yellow.svg?style=flat) ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat) ![Lines](https://img.shields.io/badge/lines-98.52%25-brightgreen.svg?style=flat)



## 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.

```js

import useFormData from "useformdata-hook";

export default function App() {

    const formData = useFormData();

    return (

        

            


            


            

        

    )

}

```

## Advanced Usage

```js

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 (

        

            

            

        

    )

}

```

Typescript example provided [here](https://github.com/ufukbakan/useFormData-hook/tree/main/example)