DEV Community: Martí Serra Molina

Creating Dynamic, Multi-Step Forms in React with Formity

Martí Serra Molina — Fri, 09 Aug 2024 08:52:04 +0000

When building modern web applications, forms often become a critical part of the user experience. Whether it's gathering user data, providing a multi-step wizard, or building an interactive survey, the challenge of creating dynamic and responsive forms can quickly become overwhelming. Enter Formity, an npm package that takes the pain out of form creation in React.

What is Formity?

Formity is an advanced form-building package designed to help React developers create dynamic, multi-step forms with ease. What makes Formity stand out from other form libraries is its ability to adapt the form's questions based on the user's previous answers. This powerful feature allows developers to create highly personalized and interactive forms without getting bogged down in complex conditional logic or unwieldy code.

Dynamic Forms: A Game Changer

The standout feature of Formity is its dynamic nature. Imagine you're building a multi-step form where each step asks a series of questions, and the next step's questions depend entirely on the answers provided in the previous step. Formity makes this not only possible but also straightforward.

For example, suppose you're building a customer survey where you want to ask follow-up questions based on the user's initial responses. With Formity, you can easily define your form's structure in JSON, specifying which questions should appear under what conditions. This level of flexibility is a game-changer for developers looking to create complex, interactive forms without writing an extensive amount of custom code.

Getting Started

Ready to give Formity a try? Head over to formity.app to get started. You can find detailed documentation, examples, and everything you need to integrate Formity into your next React project.

Building dynamic forms doesn’t have to be a headache. With Formity, you can create powerful, interactive forms that respond to your users' needs, all while keeping your code clean and maintainable. Check out formity.app and see how it can revolutionize your form-building process.

Happy coding!

Develop dynamic React forms with ease

Martí Serra Molina — Sat, 16 Dec 2023 15:28:32 +0000

How would you create a form of multiple steps in which the questions asked in each step depend on the answers provided in the previous ones?

You may think that something you would have to do would be to code all the logic of this form. That's something you could certainly do, but it is tedious and cumbersome.

What if there was a better way? Well, now there is. Formity is an npm package that lets you create dynamic React forms with ease.

Dynamic forms are multi-step forms in which the questions asked in each step depend on the answers provided in the previous ones.

These forms are created using only JSON objects, so you are able to store them in JSON files, send them through the network and even store them in a database like MongoDB.

In these forms you can write all kinds of logic using variables, conditionals, loops and a lot of different types of operators (arithmetic, comparison...).

You can check out this package here.

Create User Interfaces on the Canvas as easy as it has never been

Martí Serra Molina — Wed, 25 Jan 2023 16:30:35 +0000

Have you ever tried to create something on the canvas and found it overly complex? If that's the case, this library is for you.

Canvas User Interface is a library that lets you create user interfaces on the canvas in a very simple way.

You no longer have to define all the drawings and compute all the coords of the graphical elements. Everything is managed by this library.

The way it works is by providing you ways to create your custom elements, place them as you want (ex: aligned in the middle) and interact with them in a very simple way.

Using this library, you can create projects that would be very hard to create if this library wasn't used. These are some examples:

This library is extremely powerful when you want to create graphics that could not be created when using HTML elements (puzzle, sudoku...).

A React library for creating stunning animated websites on scroll

Martí Serra Molina — Wed, 25 Jan 2023 15:59:40 +0000

Would you want to create a stunning animated website as you scroll?

With this library you can easily create a website like this one.

It is used in React, and it is very easy to use. You just have to define the different phases that the scroll animation goes through and for each component define its animation in each phase.