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 . 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 simple_form form-for In short, this is how a form with looks like. form-for At first it may look like magic, but, although I think it's pretty cool, it's not exactly magical. Form-for uses a to decide what component to display for each . schema 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 . For this post, I'll stick with the fancier one. form-for 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 , so knows how to display it. @field form-for 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 what components to render. I created a package for bootstrap components that makes your life veeery easy. It also aims to promote form-for . accessibility 3. Building the form Now, let's put together the User, the bootstrap components and the and tags. Form Field 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 . I highly recommend giving it a try: MobX https://codesandbox.io/s/qz087nv8nj 5. Repo _form-for - Build simple and declarative ReactJS forms from your models_github.com form-for/form-for 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 _Developer, feature your best projects in a plug and play portfolio. The best part, for free._www.gitshowcase.com GitShowcase

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Introducing form-for. ReactJS Forms Made Easy

Too Long; Didn't Read

People Mentioned

Company Mentioned

Pedro Silva Moreira

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Introducing form-for. ReactJS Forms Made Easy

Too Long; Didn't Read

People Mentioned

Company Mentioned

Pedro Silva Moreira

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES