controlled-form-hook

React hook for handling forms with controlled components and validation.

Install

npm install --save controlled-form-hook

yarn add controlled-form-hook

Usage

import * as React from 'react'

import { useForm } from 'controlled-form-hook';
import { Validators } from 'tiny-validation';
const { isPresent, isEmail, isTrue, maxChars } = Validators;

type FormValues = {
  name: string;
  email: string;
  password: string;
  tos: false;
};

// ... inside your component

const {
    handleSubmit,
    handleFieldChange,
    isSubmitting,
    isDisabled,
    values,
    visited,
    errors,
    reset,
  } = useForm<FormValues>({
    onSubmit: submit,
    schema: {
      name: [isPresent()],
      email: [isPresent(), isEmail()],
      password: [isPresent(), maxChars(30)],
      tos: [isTrue()],
    },
    initialValues: {
      name: 'User McUserson',
      email: '',
      password: '',
      tos: false,
    },
  });

See the example folder in the repo for a full working example.

License

MIT © fractal-ly

This hook is created using create-react-hook.