Introduction

Seeing the growing demand for stable, quick, scalable, and reusable form solutions we decided to try our best to build our own Form system, based on our reusable components from the design system.

We have tried several well-known solutions such as formik, react-hook-form or 'react-jsonschema-form' but none of them was good enough to support our ready-made components which are unified for the next phases of Mercell platform.

To prevent problems like reinventing the wheel or code redundancy/solution redundancy we were seeking a solution that will help us wrap all form interactions and communications and would leave the design part open for us.

Fortunately React Final Form is all we need!

React Final Form

The heart of our solution is based on React final form library. It is a high-performance, subscription-based form state solution to wrap all necessary interactions and communications within the abstract concepts of Form and Fields.

Due to the abstract Fields concept, we can easily set up our internal components from the Design system so React Final Form would be able to utilize them inside the subscription model.

We strongly encourage you to check React Final Form documentation, since our solution would be open for any fancy additions such as decorators or mutators which are a part of this library too.