Skip to content

Youshido/context-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jul 15, 2020
a4c711a · Jul 15, 2020
Mar 14, 2019
Jul 19, 2018
Jul 15, 2020
Jul 10, 2018
Oct 25, 2018
Jul 18, 2018
Jul 15, 2018
Jul 15, 2018
Jul 8, 2018
Jul 15, 2020
Jul 19, 2018
Jul 18, 2018
Feb 15, 2020

Repository files navigation

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/