react-use-form-data

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

Basic Demo

It can be useful for prototyping with form editors that need to control sub-component props. The demo used in 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)

npm i react-use-form-data

CDN script (for prototyping only)

<script type="text/javascript" src="https://unpkg.com/react-use-form-data/umd/react-use-form-data.js"></script>

Usage

Node.js development setup (recommended)

• Import the installed Hook
• Call the Hook with initial form data as key name-value pairs
• Configure your form fields to read in formData and update via events to updateFormData()

Sample code snippet

//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 (
        <div>
            <input type='number' 
                value={formData.numberField} 
                onChange={(evt) => updateFormData('numberField', evt)}
                data-testid='numberField' />

            <input type='text' 
                value={formData.textField} 
                onChange={(evt) => updateFormData('textField', evt)}
                data-testid='textField' />

            <input type='checkbox' 
                checked={formData.checkboxField} 
                onChange={(evt) => updateFormData('checkboxField', evt)}
                data-testid='checkboxField'/>
        </div>
    )
}

Usage via browser script (for prototyping only)

See sample file in demo/umd-example.html

License

MIT © Lewis Hunt