Quick start

Installation

bash
yarn add @buildo/formo

bash
yarn add @buildo/formo

important

formo assumes react as peer dependency, so make you have it installed

Example

Here's a very basic example of how you may use formo.

In the next sections we will see some reccomendations on how to make it even more convenient to use.

tsx
import { validators, useFormo, success } from "@buildo/formo";
 
export const MyForm = () => {
  const { fieldProps, handleSubmit } = useFormo(
    {
      initialValues: {
        fullName: "",
        acceptsTerms: false,
      },
      fieldValidators: () => ({
        acceptsTerms: validators.checked(
          "You must accept terms and conditions"
        ),
      }),
    },
    {
      onSubmit: async (values) => success(values),
    }
  );
 
  return (
    <form>
      <div>
        <label htmlFor={fieldProps("fullName").name} />
        <input
          type="text"
          id={fieldProps("fullName").name}
          name={fieldProps("fullName").name}
          value={fieldProps("fullName").value}
          onChange={(e) =>
            fieldProps("fullName").onChange(e.currentTarget.value)
          }
          onBlur={fieldProps("fullName").onBlur}
        />
      </div>
 
      <div>
        <input
          type="checkbox"
          id={fieldProps("acceptsTerms").name}
          name={fieldProps("acceptsTerms").name}
          checked={fieldProps("acceptsTerms").value}
          onChange={(e) =>
            fieldProps("acceptsTerms").onChange(e.currentTarget.checked)
          }
          onBlur={fieldProps("acceptsTerms").onBlur}
        />
        <label htmlFor={fieldProps("acceptsTerms").name}>
          Accept terms and conditions
        </label>
        <p>
          {fieldProps("acceptsTerms").issues?.map((issue) => (
            <span key={issue}>{issue}</span>
          ))}
        </p>
      </div>
 
      <button onClick={handleSubmit}>Submit</button>
    </form>
  );
};

tsx
import { validators, useFormo, success } from "@buildo/formo";
 
export const MyForm = () => {
  const { fieldProps, handleSubmit } = useFormo(
    {
      initialValues: {
        fullName: "",
        acceptsTerms: false,
      },
      fieldValidators: () => ({
        acceptsTerms: validators.checked(
          "You must accept terms and conditions"
        ),
      }),
    },
    {
      onSubmit: async (values) => success(values),
    }
  );
 
  return (
    <form>
      <div>
        <label htmlFor={fieldProps("fullName").name} />
        <input
          type="text"
          id={fieldProps("fullName").name}
          name={fieldProps("fullName").name}
          value={fieldProps("fullName").value}
          onChange={(e) =>
            fieldProps("fullName").onChange(e.currentTarget.value)
          }
          onBlur={fieldProps("fullName").onBlur}
        />
      </div>
 
      <div>
        <input
          type="checkbox"
          id={fieldProps("acceptsTerms").name}
          name={fieldProps("acceptsTerms").name}
          checked={fieldProps("acceptsTerms").value}
          onChange={(e) =>
            fieldProps("acceptsTerms").onChange(e.currentTarget.checked)
          }
          onBlur={fieldProps("acceptsTerms").onBlur}
        />
        <label htmlFor={fieldProps("acceptsTerms").name}>
          Accept terms and conditions
        </label>
        <p>
          {fieldProps("acceptsTerms").issues?.map((issue) => (
            <span key={issue}>{issue}</span>
          ))}
        </p>
      </div>
 
      <button onClick={handleSubmit}>Submit</button>
    </form>
  );
};