@kazungusafari/react-form-field v1.0.0-alpha.4

React-form-field

A form state management library with component based and declarative error validation.

Install

The package name will surely change in future.This is just an alpha version

 npm install @kazungusafari/react-form-field

Quick Start

import { useForm, FormField, getFieldIfEvent  } from "@kazungusafari/react-form-field";

export default function App() {
  const { formData, onChangeFieldValueHandler, formHasError, setFormError,formErrors } = useForm({
    email: "",
    password: "",
    confirmPassword: "",
    profilePictire: []
  });

  const onSubmitHandler = (e) => {
    e.preventDefault();
    if (formHasError === false) {
      console.log(formData);
    }
    else{
       console.log(formErrors);
   }
  };

  return (
    <div className="App">
      <form onSubmit={onSubmitHandler}>
        <FormField
          name="email"
          type="email"
          required
          onFieldError={setFormError}
        >
          {({ isFieldTouched, fieldErrors, onChangeFieldErrorHandler }) => (
            <label>
              Email:
              <input
                value={formData.email}
                onChange={e => {
                   const field = getFieldIfEvent(e)
                   onChangeFieldValueHandler(field);
                   onChangeFieldErrorHandler(field)
                   }}
                type="email"
                name="email"
              />
              { isFieldTouched && fieldErrors.email && fieldErrors.type === 'email' && (
                <p>Email provided is not correct</p>
              )}
              { isFieldTouched && fieldErrors.email && fieldErrors.type === 'required' && (
                <p>Email is required</p>
              )}
            </label>
          )}
        </FormField>
        <FormField
          name="password"
          type="password"
          required
          onFieldError={setFormError}
        >
          {({ isFieldTouched, fieldErrors, onChangeFieldErrorHandler }) => (
            <label>
              Password:
              <input
                value={formData.password}
                onChange={e => {
                   const field = getFieldIfEvent(e)
                   onChangeFieldValueHandler(field);
                   onChangeFieldErrorHandler(field)
                   }}
                type="password"
                name="password"
              />
              { isFieldTouched && fieldErrors.password && fieldErrors.type === 'password' && (
                <p>The password should at least have six characters and  one uppercase character</p>
              )}
              { isFieldTouched && fieldErrors.password && fieldErrors.type === 'sameAs' && (
                <p>The confirm password field should match password field</p>
              )}
              { isFieldTouched && fieldErrors.password && fieldErrors.type === 'required' && (
                <p>Password field is required</p>
              )}
            </label>
          )}
        </FormField>
        <FormField
          name="confirmPassword"
          type="password"
          required
          onFieldError={setFormError}
          sameAs={{ name: "password", value: formData.password }}
        >
          {({ isFieldTouched,fieldErrors, onChangeFieldErrorHandler }) => (
            <label>
              Confirm Password:
              <input
                value={formData.confirmPassword}
                onChange={e => {
                   const field = getFieldIfEvent(e)
                   onChangeFieldValueHandler(field);
                   onChangeFieldErrorHandler(field)
                   }}
                type="password"
                name="confirmPassword"
              />
              { isFieldTouched && fieldErrors.confirmPassword && fieldErrors.type === 'password' && (
                <p>The password should be at least have six characters and one uppercase character</p>
              )}
              { isFieldTouched && fieldErrors.confirmPassword && fieldErrors.type === 'sameAs' && (
                <p>The confirm password field should match password field</p>
              )}
              { isFieldTouched && fieldErrors.confirmPassword && fieldErrors.type === 'required' && (
                <p>Confirm password field is required</p>
              )}
            </label>
          )}
        </FormField>
        <FormField
          name="profilePicture"
          type="imageMimeTypes"
          acceptsOnly={["jpg", "jpeg"]}
          required
          onFieldError={setFormError}
        >
          {({ isFieldTouched, fieldErrors, onChangeFieldErrorHandler }) => (
            <label>
              Profile Picture:
              <input
                onChange={e => {
                   const field = getFieldIfEvent(e)
                   onChangeFieldValueHandler(field);
                   onChangeFieldErrorHandler(field)
                   }}
                type="file"
                name="profilePicture"
              />
              {isFieldTouched && fieldErrors.profilePicture &&  fieldErrors.type === 'imageMimeType' &&(
                <p>Only filenames with jpg and jpeg extensions are allowed</p>
              )}
              {isFieldTouched && fieldErrors.profilePicture &&  fieldErrors.type === 'required' &&(
                <p>Profile picture is required</p>
              )}
            </label>
          )}
        </FormField>
        <button disabled={formHasError} type="submit">
          Sign Up
        </button>
      </form>
    </div>
  );
}