Reactive forms for react and react native, using hooks and Mobx@6

Installation:

npm install -s react-fluid-form mobx mobx-react yup lodash
// or:
yarn add react-fluid-form mobx mobx-react yup lodash

Inspiration

I made this library for particular use, because some libraries I used did not satisfy me: formik, mobx-react-form, unform. Some features are inspired by these libs.

The purpose of this library is to be easy to use, with hooks and mobx, which in my use proved to be more performative. Validation is completely optional and customizable. I hope it helps who needs something like this.

I used Mobx for store the state (https://mobx.js.org)

Quick start

Table of Contents

• 1. Initial configuration
  • 1.1 Define components
  • 1.2 Add <FormProvider />
• 2. Create your form
  • 2.1 Call useForm hook
  • 2.2 Validate the form
  • 2.3 Wrap your component with <Form />
  • 2.3 Wrap your field with <Field />
• 3. Form instance
• Contributions

1. Initial configuration

1.1 Define components

First, you need to create a bind components object, that tells to library how pass props to field component (like <input />):

const components = {
  textInput: {
    asValue: "value", // how pass value to field (default is "value")
    asChange: ["onChange", ev => ev.target.value], // event for onChange (default is "onChange")
    defaultValue: "", 
    type: String,
    asBlur: ["onBlur"] // event for onBlur (default is "onBlur")
  },
  checkbox: {
    asValue: "checked",
    asChange: ["onSelect"],
    defaultValue: false,
    type: Boolean
  }
}

1.2 Add <FormProvider />

After, you need wrap root component with <FormProvider />, and pass components:

import { FormProvider } form 'react-fluid-form'

function App() {
  return <FormProvider components={components}>
    // ...your code
  </FormProvider>
}

2. Create your form

2.1 Call useForm hook

Now, you need call useForm inside your component, that instantiate the form. With instance, you can get the result values, errors, validate programmatically, check validation, and more.

import { useForm } form 'react-fluid-form'

function MyForm() {
  const form = useForm({
    initialValues: {

    } // optional
  })
}

2.2 Validate the form

Optionally, pass the validator. React fluid form, by default, uses yup for validation, but you can create your custom validator, or use other libraries. There is no need to use react-fluid-form with validation, just you want.

Example code:

import {useYupValidator, useForm} form 'react-fluid-form'
import * as yup form 'yup'

// Inside component:

// Using yup:
const schema = yup.object().shape({
  person: yup.object({
    name: yup.string().required()
  }).required()
})

const validator = useYupValidator(schema)
const form = useForm({ validator })



// Custom validator:
const validator = function(path, values) {
  // params example: 
  // path: "person.name"
  // values: {person: {name: ""}}

  const { person: {name} } = values

  // If path is undefined, react-fluid-form is validating entire form
  if(path) {
    // validating specific path of form
    if(path === "person.name" && name) { 
      return "Name of person is required"
    }
    return ""
  } 

  // validating entire form
  if(!name) {
    return {
      "person.name": "Name of person is required"
    }
  }
}

2.3 Wrap your component with <Form />

import {useForm, Form, Field} form 'react-fluid-form'

function MyForm() {
  const form = useForm()
  
  return <Form
    form={form}
    validateOnBlur // to validate path on blur the field
    validateOnChange // to validate path on change
  >
    // ...
  </Form>
}

2.3 Wrap your field with <Field />

import {useForm, Form, Field} form 'react-fluid-form'
import {observer} form 'mobx-react'

function MyForm() {
  const form = useForm()
  
  return <Form
    form={form}
    validateOnBlur // to validate path on blur the field
  >
    <Field
      path={"person.name"}
      use={"textInput"}
    >
      <input placeholder={"Name"} />
    </Field>
  </Form>
}

// Important: for use form instance properties, wrap MyForm in observer (of mobx-react - https://github.com/mobxjs/mobx-react):
export default observer(MyForm)

To show the error on screen, Field pass "error" prop forward. So, you can render in custom input component

3. Form instance

Form instance has some helper properties and methods:

Prop/Method	Return type	Description
form.isValid	boolean	Check if the form is valid
form.result	object	Get values to save, without mobx observable
form.errors	object	Errors object
form.validateAll()	void	Validate entire form
form.validatePath(path)	void	Validate path of form
form.setValues(values)	void	Pass new values to form
form.setPathValue(path, value, validate)	void	Set value for specific path
form.setPathError(path, error)	void	Set error for specific path
form.mergeValues(values)	void	Merge values with new values to form
form.clear()	void	Clear form, with initialValues
form.clearErrors()	void	Clear errors

4. Hooks

Now, we have useFormChangeEffect hook. Use when you need to call a function, reacting to a change in the value of a field.

useFormChangeEffect((name) => {
  console.log("Name changed: ", name)
}, "name", [])

Contributions

All contributions are welcome. Just make a PR.