Reactive Forms

This module is largely completed. That said, many more tests need writing and various files need refactoring. Much of this work exists in the development branch and will comprise the V2 release.

Basic Usage

The following example illustrates the most basic implementation of this module. Note the parent components <Config /> and <Notification />: these are absolutely necessary, as explained in the documentation below (coming soon).

    import Config, { Notification, Form, Field } from '@ibberson92/reactforms';
    
    const saveFormDataToConsole = formData => {
        console.log(formData);  
    };
    
    const alertOnComplete = data => {
        alert('Call done!');  
    };
    
    export default props => (
        <Config>
            <Notification>
                <Form service={saveFormDataToConsole} callback={alertOnComplete} submit="Save">
                    <Field name="firstField" label="My First Field" type="text" required />
                </Form>
            </Notification>
        </Config>
    );

Custom Field Props

| Name | Value(s) | Required | Notes | |--|--|--|--| | Type | "text", "phone", "email", "password", "credit", "textarea", "richtext", "date", "time", "select", "radio" or "checkbox" | Yes | Accepts any value; however, many come with pre-configured settings. | Options | array or object (see snippet below) | Yes | Applies to select and radio types. | | Name | string | Yes | Uses as the FormData key on form submission. | | Value | string, integer or boolean | No | Provides a default value for the field. | | Required | boolean | No | Marks as a required field. | | Label | string | No | Displays a <label></label> tag in the output. | | Description | string | No | Renders fine print for the field to expound on the label. |

    /**
    * @NOTE
    * Example of the "options" props value.
    * The simple object applies to select and radio fields alike.
    * The complex object applies to select exclusively.
    */

    let simpleSelectOptions = [{
        name: 'Simple Select',
        value: 1
    }];
    
    let groupSelectOptions = {
        groups: [{
            name: 'My First Group', 
            options: simpleSelectOptions
        }]  
    };