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: https://codesandbox.io/u/pedsmoreira/sandboxes
4.1 MobX
FormFor goes really well with MobX. I highly recommend giving it a try: https://codesandbox.io/s/qz087nv8nj
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