formst

1) Introduction

Formst is a JS 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
• 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',
      },
    }
  );
  

• Create an instance of the model:

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

• Add handler for submit

  todoForm.onSubmit((formInstance: Instance<typeof createProjectForm>) => {
    console.log(formInstance.getFormData());
    formInstance.setSubmitting(false);
  });
  

• 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" />
  
      <br />
  
      <Field name="description" />
      <ErrorMessage name="description" />
  
      <button type="submit">Submit</button>
    </form>
  </MSTForm>
  

7) Tech Stack

• React
• Javascript.

8) Contributors

• Aditya Jamuar (@GeekJamuar)
• Sanket Sahu (@sanketsahu)
• Himanshu Satija (@HimanshuSatija_)

9) 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.

10) License

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