https://github.com/lewhunt/react-use-form-data

a custom React Hook that lets you easily populate and update form input data within functional components
https://github.com/lewhunt/react-use-form-data

demo editor form form-data hook input react react-hook react-hooks tool

Last synced: 2 days ago
JSON representation

a custom React Hook that lets you easily populate and update form input data within functional components

• Host: GitHub
• URL: https://github.com/lewhunt/react-use-form-data
• Owner: lewhunt
• License: mit
• Created: 2020-01-07T16:41:39.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-08T13:20:02.000Z (over 4 years ago)
• Last Synced: 2024-10-12T20:08:39.239Z (about 1 month ago)
• Topics: demo, editor, form, form-data, hook, input, react, react-hook, react-hooks, tool
• Language: JavaScript
• Homepage: https://lewhunt.github.io/react-use-form-data/
• Size: 16.2 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React-Use-Form-Data Custom Hook

This custom React Hook lets you easily populate and update form input data within functional components.

**Example of use with an editor**

![Example](https://github.com/lewhunt/assets/raw/master/readme/react-use-form-data-example.gif)

[Basic Demo](https://lewhunt.github.io/react-use-form-data/)

It can be useful for prototyping with form editors that need to control sub-component props. The demo used in [React Video Looper](https://github.com/lewhunt/react-video-looper) uses this hook to manage the form data state, passing props down to the video component.

Currently it's configured to handle the following input field types: number, text, button and checkbox.

## Install

### npm package (recommended)

```bash

npm i react-use-form-data

```

### CDN script (for prototyping only)

```js

```

## Usage

### Node.js development setup (recommended)

1. Import the installed Hook

2. Call the Hook with initial form data as key name-value pairs

3. Configure your form fields to read in formData and update via events to updateFormData()

### Sample code snippet

```js

//1. IMPORT THE HOOK 

import React from 'react'

import useFormData from 'react-use-form-data'

export default function Demo() {

    // 2. CALL THE HOOK WITH INITIAL DATA AS NAME-VALUE PAIRS

    const [formData, updateFormData] = useFormData({ 

        numberField: 101,

        textField: 'hello world',

        checkboxField: true

    });

 

    // 3. FORM FIELDS THEN READ IN STATE DATA FROM formData AND UPDATE DATA VIA updateFormData

    return (

        


             updateFormData('numberField', evt)}

                data-testid='numberField' />


             updateFormData('textField', evt)}

                data-testid='textField' />

             updateFormData('checkboxField', evt)}

                data-testid='checkboxField'/>

        

    )

}

```


### Usage via browser script (for prototyping only)

See sample file in [demo/umd-example.html](https://github.com/lewhunt/react-use-form-data/blob/master/demo/umd-example.html)

## License

MIT © [Lewis Hunt](https://github.com/lewhunt)