A model-driven library for quickly building high-performance forms in React

by React

Formst

1) Introduction

Formst is a model-driven library for quickly building high-performance forms in React. Unlike most form libraries that are UI-First, Formst is Data-First.

2) Motivation:

While working on a recent project, GeekyAnts devs realised that there was no easy way to build forms for React apps. Yes, there are solutions available but they're not quite optimal. It is difficult to find a single library that provides great UX, speed and features such as interdependency between form fields. That's when we decided to build Formst, a library that allows you to build high-performance, responsive forms for your React apps.

3) Features

  • High-performance: ****Formst is MST-based which makes it fast and *powerful*.
  • Responsive: Create responsive forms for your React apps with ease.
  • Forms for Everything: Build flat, stepper or nested forms based on your app needs.
  • Middleware: Use middleware to modify form behaviour such as pre-processing input values.

4) Installation

Use 'yarn' or 'npm' to install this library as shown below:

# yarn
yarn add mst-form-creator

# npm
npm add mst-form-creator

5) Dependencies

MobX, mobx-react/mobx-react-lite and MobX-state-tree.

6) Usage

  • Create a form model as shown below:

    const TodoForm = createFormModel(
  'TodoForm',
  {
    title: types.string,
    description: types.string,
  },

  {
    validation: {
      title: ['required'],
      description: 'required',
    },
  }
).actions(self => ({
  onSubmit: () => {
    setTimeout(() => {
      alert(JSON.stringify(getSnapshot(self), null, 2));
    }, 100);
  },
}));

  • Create an instance of the model:

    const todoForm = TodoForm.create({
  title: '',
  description: '',
});

  • Wrap the components inside MSTForm and use the Field API to render the fields:

    <MSTForm formInstance={todoForm}>
  <form onSubmit={todoForm.handleSubmit}>
    <Field name="title" />
    <ErrorMessage name="title" />

    <Field name="description" />
    <ErrorMessage name="description" />

    <button type="submit">Submit</button>
  </form>
</MSTForm>

7) Example

This simple login form will take two inputs that are validated on submission. It can also display specific error messages for invalid input values.

8) Tech Stack

React & Javascript.

GitHub

https://github.com/formstjs/formst