npm.io
1.0.11 • Published 7 years ago

@ibberson92/reactforms

Licence
ISC
Version
1.0.11
Deps
2
Size
2.5 MB
Vulns
0
Weekly
0
SummaryDependencyVersions

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
        }]  
    };

Keywords

reactforms