https://github.com/formstjs/formst
Model-driven Form library for React
https://github.com/formstjs/formst
form forms geekyants mobx mobx-state-tree mst react-apps
Last synced: 6 months ago
JSON representation
Model-driven Form library for React
- Host: GitHub
- URL: https://github.com/formstjs/formst
- Owner: formstjs
- License: mit
- Created: 2021-01-28T10:17:20.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-09T13:44:48.000Z (almost 5 years ago)
- Last Synced: 2025-07-02T22:06:16.451Z (7 months ago)
- Topics: form, forms, geekyants, mobx, mobx-state-tree, mst, react-apps
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 93
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
### 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](https://geekyants.com) 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:
```bash
# 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:
```tsx
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:
```tsx
const todoForm = TodoForm.create({
title: '',
description: '',
});
```
- Wrap the components inside _MSTForm_ and use the _Field_ API to render the fields:
```tsx
Submit
```
### 7) Example
[This simple login form](https://codesandbox.io/s/formst-demo-ffw8v) 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](https://twitter.com/geekjamuar?lang=en))
- Sanket Sahu ([@sanketsahu](https://twitter.com/sanketsahu))
- Himanshu Satija ([@HimanshuSatija\_](https://twitter.com/HimanshuSatija_))
- Meenu Makkar ([@meenu_makkar](https://twitter.com/makkar_meenu))
- Vidhi Kataria ([@VidhiKataria2](https://twitter.com/vidhikataria2?lang=en))
- Gaurav Guha ([@greedy_reader](https://twitter.com/greedy_reader?lang=en))
### 10) How to Contribute
Thank you for your interest in contributing to Formst! We are lucky to have you 🙂 Head over to [Contribution Guidelines](https://github.com/formstjs/formst/blob/master/CONTRIBUTING.md) 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](https://github.com/formstjs/formst/blob/master/LICENSE) for more information.