Neoclassic Placebo Maker

    formst
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    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

    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.

    Install

    npm i formst

    DownloadsWeekly Downloads

    83

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    166 kB

    Total Files

    32

    Last publish

    Collaborators

    • aditya_jamuar
    • himanshu-satija