Getting Started

Requirement

React 18 is needed to use Formiz V2.

Installation

yarn add @formiz/core@beta

Concept

The idea behind Formiz is to allows you to build advanced forms with multi-step, complex validations and a good UX without pain

The main idea is to build fields as independent reusable components. Fields can be anything, not just inputs. Once you have built your fields, you can use them everywhere.

Usage

Create your first field !

import { useField, FieldProps } from "@formiz/core";
 
type MyFieldProps<FormattedValue> = FieldProps<string, FormattedValue>;
 
export const MyField = <FormattedValue = string,>(props: MyFieldProps<FormattedValue>) => {
  const { value, setValue, isValid, errorMessage } = useField(props);
  return (
    <>
      <input value={value ?? ""} onChange={(e) => setValue(e.target.value)} />
      {
        !isValid && <p>{errorMessage}</p> // Display error message
      }
    </>
  );
};

Now you can import it to your form !

import { useForm } from "@formiz/core";
import { isEmail } from "@formiz/validations";
 
export const MyForm = () => {
  const handleSubmit = (values) => {
    console.log(values);
  };
 
  const form = useForm({ onSubmit: handleSubmit }); // create a new form
  
  return (
    <Formiz connect={form} autoForm>
      <MyField
        name="email"
        validations={[
          {
            handler: isEmail(),
            message: "Email is invalid",
          },
        ]}
      />
      <button type="submit">Submit</button>
    </Formiz>
  );
};

Upgrading to v2