formstjs / formst

Model-driven Form library for React

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.

9) Contributors

• Aditya Jamuar (@GeekJamuar)
• Sanket Sahu (@sanketsahu)
• Himanshu Satija (@HimanshuSatija_)
• Meenu Makkar (@meenu_makkar)
• Vidhi Kataria (@VidhiKataria2)
• Gaurav Guha (@greedy_reader)

10) How to Contribute

Thank you for your interest in contributing to Formst! We are lucky to have you 🙂 Head over to Contribution Guidelines and learn how you can be a part of a wonderful, growing community.

For major changes, please open an issue first to discuss changes and update tests as appropriate.

11) License

Licensed under the MIT License, Copyright © 2020 GeekyAnts. See LICENSE for more information.