minforms

MinForms

🔥 Small and quick alternative to formik

Why

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

Main features:

• small in size
• easy to use (only one component)
• has full typescript support
• no external dependencies

! minforms library is designed to provides no Fields or Custom Inputs. It only cares about values you provided, so you can build best suited Fields/Inputs for you.

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

RenderProps are passed to minform's render function (check example above)

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