Introducing form-for. ReactJS Forms Made Easy

Simple, declarative and powerful forms with ReactJS

Photo by Mikhail Vasilyev — https://unsplash.com/photos/NodtnCsLdTE

If came just for the link, just click here.

I've been coding for a few years and played with a few technologies. In this path, I've become a big fan of a Rails gem called simple_form. I'm also a fan of React. With these two in mind, I decided to build a library that had the simplicity of simple_form and the customization power of React. It's called form-for

In short, this is how a form with form-for looks like.

At first it may look like magic, but, although I think it's pretty cool, it's not exactly magical. Form-for uses a schema to decide what component to display for each field .

Now that you've seen a broader perspective of how it works, let's go step by step and create a schema, binding our components and show you a live example to try out.

Source: https://giphy.com/gifs/bbcamerica-elijah-wood-dirk-gently-l378kNMpVWNmilDLa

1. Creating a schema

There are a couple of ways to achieve this with form-for . For this post, I'll stick with the fancier one.

Let's create a user model. Our user will have a name, surname, email, phone number and access (user/guest). We'll annotate each field with @field , so form-for knows how to display it.

2. Binding components

As you can see on the code above, each field has a type set to it; some even have a couple extra properties.

Now, we need to tell form-for what components to render. I created a package for bootstrap components that makes your life veeery easy. It also aims to promote accessibility.

3. Building the form

Now, let's put together the User, the bootstrap components and the Form and Field tags.

4. Live

I created an extended version of the form we created. In this one the user has a list of todoItems as well, which adds a new degree of fun. The code is very straight forward, just like the one you saw above.

And if you want more sandbox examples, I have two others in my profile:

4.1 MobX

FormFor goes really well with MobX. I highly recommend giving it a try:

5. Repo

form-for/form-for_form-for - Build simple and declarative ReactJS forms from your models_github.com

Check out the repo, there a lot more instructions in there. If you like it, share with your friends and colleagues . I'm looking forward to hear your thoughts the comments below or GitHub PR/Issue.

If you don’t like comment too, lemme know how you think it could be better.

https://giphy.com/gifs/transparent-GwGXoeb0gm7sc

I'm Pedro Moreira and I build software for companies and startups. I'm a believer in contributing to the community through Open Source and I've created a couple of projects myself. One of them is GitShowcase, a platform that helps developers be awesome at showcasing their talents and find their dream job ❤

Twitter: https://twitter.com/pedsmoreira

GitHub: https://github.com/pedsmoreira

GitShowcase_Developer, feature your best projects in a plug and play portfolio. The best part, for free._www.gitshowcase.com