minforms

MinForms

- Too small to not use

Small and quick alternative to formik

Why ?

Formik is a really great library for building forms in typescript. Has great API and it's easy to use. MinForms library is not trying to replace Formik in any way, it's just small lib which helps you to build basic forms. For complicate forms, I suggest to use formik instead.

• small in size
• easy to use
• has full typescript support
• no external dependencies

Installation

npm i quickform or yarn i quickform

Examples

Building basic Login form

import * as React from "react";
import { MinForm } from "../lib/index";

export const MyForm = (props: { email: string; password: string }) => (
  <MinForm
    initialValues={{ email: props.email, password: props.password }}
    render={({ values }) => (
      <form>
        <h2>Login Page</h2>
        <input type="text" value={values.email} />
        <br />
        <input type="password" value={values.password} />
        <br />
      </form>
    )}
  />
);

More examples can be found in ./examples/

API

copied from ./lib/MinForms.tsx

MinFormProps

/**
 * Initial values passed to QuickForm components
 */
initialValues: V;

/**
 * Render function that renders form based on initial values
 * @param props - given props
 */
render: (props: RenderProps<V>) => JSX.Element | JSX.Element[];

/**
 * Put all validation here
 * @param values - obtain from `MinForm` state
 * @return possible errors
 */
validation?: (values: V) => ErrorsFromValues<V>;

/**
 * Should validate only on submit ?
 * @default false
 */
validateOnSubmit?: boolean;

/**
 * Should immediately after creating a component ?
 * @default true
 */
validateOnInit?: boolean;

/**
 * Automatically change value based on input `name`
 */
handleChange: (e: ReactChangeEvent<HTMLInputElement>) => void;

RenderProps

values: V;
errors: {[ErrorValue in keyof V]?: string };
setValue: (value: keyof V, newValue: V[keyof V]) => void;
onSubmit: (values: V) => void;