Learn the simple way of building forms in React using Context APIMichał KokocińskiBlockedUnblockFollowFollowingApr 18Spring in the Polish Tatra Mountains.
Writing forms in React is hard.
It requires a lot of boilerplate to code a state management logic, validation rules and input handlers.
There are dozens of solutions that reduce this pain a bit, like the most popular now — Formik.
On the other hand, inputs need a reusable design system that can offer attractive design, is cross browser tested and easy to be combined into various layouts.
This problem is being solved by UI frameworks like Material UI, but they give only a customisable look and assume that you manage a state on your own.
So people mix these two sides of form development with various results, overcoming the high learning curve of picked technologies and trying to put them together.
It left me unsatisfied about React and what I wanted to achieve, was to reduce the code required to write a single form.
I decided to build my own library.
The assumption was to limit code only to JSX components with a props and move whole boilerplate with state management and styling to a separate package, so to finally get a development experience similar to using React Router.
Here is an example to picture what I’m talking about:<Router> <Route path="/" exact component={Index} /> <Route path="/about/" component={About} /> <Route path="/users/" component={Users} /></Router>Look, it is so easy to read for any React developer.
Very intuitive.
State managementOf course to achieve this goal any advanced state management technologies like Redux or MobX fall off at an early stage.
Let’s say it, application state tools are not for forms.
Leave them for data caching and UI management.
I see forms as standalone entities that work totally independent.
They can retrieve some initial data from a global application state and update it as well on submit, but it is better to leave everything between an input and output under a context of a Form.
And here we go.
React Context API is what sits in a core of react-standalone-form.
You can use this library to write even the most complex form in a legible way.
Learning curve is low and you can install it as any other NPM package.
yarn add react-standalone-formForm exampleTo show how the react-standalone-form works, let’s try a very basic app with a form that displays results in a console log after clicking on the submit button.
Let’s look at the code first:Now what is happening above, step by step:Whole app is wrapped into <FormThemeProvider>.
It defines a default look and feel of all forms that can be customised by optional theme prop.
Initiation of a new form anywhere in the app is a role of <Form /> component.
Each field of a form is declared here by unique name in a fields prop array.
The Form component defines the Context, that stores data about all fields.
Their values, validation states, whether they are touched, etc.
<Input /> and <Select /> are visual inputs shipped by a package.
They render the inputs that updates the context of a Form on every change.
Each element of this type must have a name prop to define which field in a fields data object should be controlled by this input.
All other props are here to customise the user experience of the inputs.
<FormButton> allows user to trigger a submit function which gives access to all field values formatted into a form of simple javascript object.
All of the components used there are managed by Context API, so they can be nested inside deep structure of multiple divs.
The same like you would build a standard HTML form.
All inputs will work as long as they are in a scope of a form.
That’s all the basics.
I you want to see react-standalone-form in action, there is a demo with more advanced form examples.
Visual flexibilityTo keep the minimalistic approach, package is shipped with styled inputs (whole list is documented here) so you don’t need to care about styles.
Imposed design has a limited, but still wide range of customisations.
From a technical point of view, I was inspired by React Material UI, so there is a theme object, where with the help of documentation you can override default values.
So you are free to customise the input heights, spacings, colours, borders, fonts, etc.
If you need more unique input, you can easily create your own with the help of withFormControl().
This Higher Order Component makes you sure that custom input will be fully compatible with the rest.
SummaryOriginally, react-standalone-form was a Form component of Fronthack (an UI framework for React and static HTML that was used to build dozens of projects created in MVP-Space and WAAT).
After many refactorings I finally concluded that it deserves a separate library.
So you can be sure that styles of this package are battle-tested.
I hope that react-standalone-form library will bring some attention and change to the way forms are implemented on many projects.
Any feedback or suggestions will be appreciated.
The project is live.
Test it, read the docs, use it, give a star or at least, give it a chance!Usage examples and full docs can be found on main Readme of a package: https://github.
com/frontcraft/react-standalone-form.. More details