context-form

README

Form Management for React & React Native with a simple and flexible API.
Demo: https://youshido.github.io/context-form/demo/
Docs: https://youshido.github.io/context-form/

Thanks to the Context API (as of React 16.3) it is possible to write a library for the Form Management with a very clean and almost invisible API where you don't have to pass Form's props all over your project.

Main Features

• Declarative API with no need for extra props passing
• InitialValues as a simple prop to the <Form initialValues={} />
• Controlled and Uncontrolled Form State
• Field Arrays and Groups with custom JSX/Fields structure
• Easy to implement Custom Controls
• Support for the complex JSX structure inside the Form
• Themes support — implement project-wide styling in a single file
• Ready to go integrations with Bootstrap, Ant and Material UI
• And it's simply a <Form /> that's fun to use :)

Installation

Add context-form package to your project using yarn or npm:

$ yarn add context-form (or npm i context-form)

Once you installed Context Form as a dependency you can try it out with this basic example of the uncontrolled form (note, it uses console to log the values submitted and does automatic field validation for a title field (required is just a shortcut for the more extensive rules props)

Once you installed Context Form as a dependency you can try it out with this basic example of the uncontrolled form (note, it uses console to log the values submitted and does automatic field validation for a title field (required is just a shortcut for the more extensive rules props):

import React, { Component } from 'react';
import Form, { Field, FormFooter } from 'context-form';
 
class ProductPage extends Component {
    /**
     * By default `onSubmit` will be called only if validation
     */
    onSubmit = ({ values }) => {
        console.log('Form Values', values);
    };
    render() {
        return (
            <Form onSubmit={this.onSubmit}>
                <Field name="firstName" />
                <Field name="lastName" />
                <Field name="title" required />
                // FormFooter is used just for layout purpose
                <FormFooter>
                    <button>Submit</button>
                </FormFooter>
            </Form>
        )
    }
}

You can now take a look at the more advances usage in the docs: https://youshido.github.io/context-form/