87hz / react-horm

React H(ookF)orm.

react-horm

React H(ookF)orm

This package will provide formik-like features with React Hook Support.

It uses context internally, which means as long as it is rendered within Horm, you could get access to the form by using hooks instead of passing any reference down deeply to the field component. It will be very handy especially for those complex FormInput which is defined outside of the main form.

TechStack

• React (with Hook)
• ramda
• Yup

Installation

yarn add react-horm

Usage

import { Horm, useField, useForm, useCountDown } from 'react-horm';

APIs

Horm (Component)

// render form as children
<Horm>
  <FormComponent />
</Horm>

// render form as prop
<Horm render={FormComponent} />

Horm props:

• initialValues [required]: Initial form values, it MUST contains all the fields.

• onSubmit [required]: It will be called in useForm.htmlProps.onSubmit if the form is valid.

• initialValid [optional]: Initial value of useForm.hormBag.isValid

• validateOnBlur [optional]: Default is true. Whether validation should be run in case of blur and focus.

• validateOnChange [optional]: Default is true. Whether validation should be run in case of value change.

• enableReinitialize [optional]: Default is false. If set as true, the form will be reset in case of new initialValues passed in.

• validationSchema [optional]: Yup schema. See example below.

• validationFn [optional]: Validation function which takes form values as parameter and return object contains field errors. See example below.

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .email()
    .required(),

  password: Yup.string()
    .min(6)
    .required(),
});

const validationFn: ValidationFn = (values) => {
  let errors: FormState<string[]> = { email: [], password: [] };

  if (values.email.length === 0) {
    errors.email.push('Email cannot be empty');
  }

  if (values.password.length === 0) {
    errors.password.push('Password cannot be empty');
  }

  return errors;
};

useForm (Hook)

// Example
const loginForm = useForm();

<LoginForm {...loginForm.htmlProps} />;

loginForm.hormBag

• dirty
• errors
• isValid
• isValidating
• touched
• values

loginForm.htmlProps

• onSubmit

useField (Hook)

// Example
const emailField = useField('email');

<input {...emailField.htmlProps} />;

emailField.hormBag

• value
• initialValue
• dirty
• touched
• errors
• isValid
• setValue
• setTouched
• setErrors

emailField.htmlProps

• name
• value
• onChange
• onFocus
• onBlur

useCountDown (Hook)

It is normally used to limit users' interactions with a particular function within given period (e.g sending SMS OTP code).

// Example
const [val, restart] = useCountDown(120);

val will be 0 initially, once restart is called, val will be running from the starting value you pass to the hook (120 seconds in the example above) and stops at 0. The restart function could be called multiple times, and the val will be reset to the starting value and counting down again, regardless of current value.