npm package: @formfield/react
Description: A form state management library with component based and declarative error validation.
Author: Kazungu  Safari
Latest version: 1.0.0-alpha.21

# React-form-field

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

# Install

```
 npm install @formfield/react

```

# Quick Start

[![Edit react-form-field-signup ](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-form-field-signup-bmofd3?fontsize=14&hidenavigation=1&theme=dark)

```

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>

 }

```

<!--  -->