form-react-form v0.3.2

Install

npm install form-react-form

or

yarn add form-react-form

Usage

import React, { FC } from "react";
import { useForm } from "form-react-form";

import schema from "./schema";

export interface FormInput {
  email: string;
  password: string;
}

const Form: FC = () => {
  const { values, errors, onChange, wrapSubmit } = useForm<FormInput>({
    schema,
    defaults: {
      email: "",
      password: "",
    },
  });

  const onSubmit = wrapSubmit(async (values) => {});

  return (
    <form onSubmit={onSubmit}>
      <input name="email" placeholder="Email" value={values.email} onChange={onChange} />
      {errors.email && <span>{errors.email[0]}</span>}

      <input
        name="password"
        type="password"
        placeholder="Password"
        value={values.password}
        onChange={onChange}
      />
      {errors.password && <span>{errors.password[0]}</span>}

      <button>Login</button>
    </form>
  );
};

Using fastest-validator under the hood for schema validation.

export default {
  email: {
    type: "string",
    email: true,
    empty: false,
    min: 2,
    max: 255,
  },
  password: {
    type: "string",
    empty: false,
    min: 8,
    max: 64,
  },
};

API

const { values, errors, setValues, setErrors, onChange, wrapChange, wrapSubmit } = useForm(options);

Return

Options

• defaults?: Object containing input defualt values. When not provided, initial value for each input will be undefined sometimes making inputs uncontrolled. To avoid that, it is recomended to set defaults, defaultValue on html inputs or set default value paramater on custom components.
• schema: Valid schema for fastest-validator.

Typescript

When using forms with different input and output values you should also provide FormOutput types because fastest-validator unfortunately can't convert them using schema.

// ...

export interface FormInput {
  age: string;
}

export interface FormOutput {
  age: number;
}

const Form: FC = () => {
  const { values, onChange, wrapSubmit } = useForm<FormInput, FormOutput>({
    schema,
    defaults: {
      age: "",
    },
  });

  const onSubmit = wrapSubmit(async (values) => {});

  return (
    <form onSubmit={onSubmit}>
      <input name="age" placeholder="Age" value={values.age} onChange={onChange} />

      <button>Set</button>
    </form>
  );
};