react-painlessform

Uses React 16.3 Context

Painless Form is a bunch of React Components that helps you:

• Validate form via custom validator or Yup.Schema or combined validator!
• Calculate fields
• Use typescript for type checking in fields!
• Create reusable form parts with own Validation & Transform

without any configs only declarative style.

Install

npm install --save react-painlessform

Documentation

• API Reference TypeScript

Examples

• Usage
• Styling
• Yup validation
• Transformations
• Building reusable parts
• Model building
• Subscriptions
• Date range picker & selector with data from api

import { createFormFactory } from "react-painlessform";

interface IModel {
    field: number;
    field2: string;
}

const { Form, Field } = createFormFactory<IModel>();

const MyForm = (props) => {
    return (
        <Form initValues={values} onModelChange={onModelChange}>
            <div>
                <Field name={f=>f.field}>
                    {({ inputHook, rest }) => <input {...inputHook, ...rest} />}
                </Field>
                <Field name={f=>f.field2}>
                    {({ inputHook, rest }) => <input {...inputHook, ...rest} />}
                </field>
                <button type="submit">Submit</button>
            </div>
        </Form>
    );
}