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.
npm install formstFormst is a JS library for quickly building high-performance forms in React. Unlike most form libraries that are UI-First, Formst is Data-First.
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.
- 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.
Use 'yarn' or 'npm' to install this library as shown below:
``bashyarn
yarn add mst-form-creator
$3
- mobX
- mobx-react/mobx-react-lite
- mobX-state-tree.
$3
- Create a form model as shown below:
`tsx
const TodoForm = createFormModel(
'TodoForm',
{
title: types.string,
description: types.string,
}, {
validation: {
title: ['required'],
description: 'required',
},
}
);
`- Create an instance of the model:
`tsx
const todoForm = TodoForm.create({
title: '',
description: '',
});
`- Add handler for submit
`tsx
todoForm.onSubmit((formInstance: Instance) => {
console.log(formInstance.getFormData());
formInstance.setSubmitting(false);
});
`- Wrap the components inside _MSTForm_ and use the _Field_ API to render the fields:
`tsx
``- React
- Javascript.
- Aditya Jamuar (@GeekJamuar)
- Sanket Sahu (@sanketsahu)
- Himanshu Satija (@HimanshuSatija\_)
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.
Licensed under the MIT License, Copyright © 2020 GeekyAnts. See LICENSE for more information.