@mozartspa/mobx-react

High performance, hook-based forms library for React, powered by MobX.

Features

• Form level and Field level validation with built-in async debouncing
• Supports multiple error messages per field
• Deeply nested form values (arrays, you're welcome)
• Format and parse values (to support advanced scenarios)
• Powered by MobX
• Built with React hooks
• Written in Typescript
• 

Motivation

Why another form library? Simple, I have not found easy to use form libraries that leveraged the high performance of mobx. The mostly used form libraries don't use MobX underneath, and they struggle between performance and ease of use. With MobX you can have both.

Installation

yarn add @mozartspa/mobx-form

Then install the peer-dependencies: mobx and mobx-react-lite

yarn add mobx mobx-react-lite

Links

• Docs
• API

Quickstart

A minimal example, not exactly what you would use in a real project, but it gives an overall look:

import React from "react"
import { observer } from "mobx-react-lite"
import { useField, useForm } from "@mozartspa/mobx-form"

const App = observer(() => {
  const form = useForm({
    initialValues: {
      name: "",
    },
    onSubmit: (values) => {
      console.log("submitted values", values)
    },
  })

  const nameField = useField("name", { form })

  return (
    <form onSubmit={form.handleSubmit}>
      <div>
        <label>Name</label>
        <input type="text" {...nameField.input} />
        {nameField.isTouched && nameField.error}
      </div>
      <button type="submit">Submit</button>
    </form>
  )
})

export default App

Few things to note:

• We import useForm and useField from the package @mozartspa/mobx-form.
• We wrap our component with observer(), since we're using MobX.
• useForm() gives us back a stable reference to our form instance.
• useField() gives us back a reference to a specific field of our form. We pass it the form instance, to make it know which form it should be bound to. It's required here, but in other examples we'll leverage the React Context.
• With onSubmit={form.handleSubmit} we let our form instance handle the onSubmit event.
• {...nameField.input} gives the input the necessary props to be a controlled input: name, value, onChange, onBlur.
• With {nameField.isTouched && nameField.error} we display the possible error only after the user touched the input. Anyway, in this case there's no input validation.

Credits

Heavily inspired by formik, with some ideas taken from react-form and react-final-form.