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: 1 day 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 (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-16T10:20:00.000Z (almost 2 years ago)
• Last Synced: 2024-12-18T06:24:24.412Z (16 days 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)