react-painlessform

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 example
• Advanced usage
• 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={"field"}>
                    {({ name, value, onClick, onChange, rest }) => (
                        <input name={name} value={value} onClick={onClick} onChange={onChange} {...rest} />
                    )}
                </Field>
                <Field name={"field2"}>
                    {({ name, value, onClick, onChange, rest }) => (
                        <input name={name} value={value} onClick={onClick} onChange={onChange} {...rest} />
                    )}
                </field>
                <button type={"submit"}>Submit</button>
            </div>
        </Form>
    );
}