React-form-field

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

Install

 npm install @formfield/react

Quick Start

import { Form, FormField,FormRules  } from "@formfield/react";

export default function App() {


  const onSubmit = (data) => {
    console.log(data)
  };

  return (
    <div className="App">
      <Form
       onSubmit={onSubmit}
       initialValues={{
         email: "",
         password: "",
         confirmPassword: "",
         profilePictire: []}}
         >
        <FormField
          name="email"
          rules={[
            FormRules.required("Email is required"),
            FormRules.email("Enter a correct email")
           ]}

        >
          {({ fieldErrors,getFieldProps}) => (
            <label>
              Email:
              <input
                 {...getFieldProps()}
                type="email"
              />
             <p>{fieldErrors}</p>
            </label>
          )}
        </FormField>
        <FormField
          name="password"
          rules={[
            FormRules.required("Password is required"),
            FormRules.password("Password shoudl at least have six characters and one uppercase character")
          ]}

        >
          {({ getFieldProps,fieldErrors }) => (
            <label>
              Password:
              <input
                {...getFieldProps()}
                type="password"
              />
              <p>{fieldErrors}</p>
           </label>

          )}
        </FormField>
        <FormField
          name="confirmPassword"
          rules={[
             FormRules.required("Confirm password is required"),
             FormRules.password("Password should at least have six characters and one uppercase character")
             FormRules.sameAs("password", "Confirm password should match")
            ]}
        >
          {({ getFieldProps,fieldErrors}) => (
            <label>
              Confirm Password:
              <input
                type="password"
                { ...getFieldProps()}
              />
              <p>{fieldErrors}</p>
            </label>
          )}
        </FormField>
        <FormField
          name="profilePicture"
          rules={[
              FormRules.required("Profile picture is required"),
              FormRules.imageMimeTypes(["jpg", "jpeg"],"Only jpg and jpeg images are allowed")
            ]}
        >
          {({ fieldHandler,fieldErrors,fieldName }) => (
            <label>
              Profile Picture:
              <input
                onChange={fieldHandler}
                type="file"
                name={fieldName}
              />
               <p>{fieldErrors}</p>
            </label>
          )}
        </FormField>
        <button type="submit">
          Sign Up
        </button>
      </Form>
    </div>

 }