Formity is a React library for creating advanced multi-step forms. It offers powerful logic with conditions, loops, and variables. It integrates with form libraries like react-hook-form and provides a UI kit with pre-designed components for quick form creation.
Features
Powerful Logic
Create highly customizable multi-step forms with full control using conditions, loops, and variables, allowing forms to adapt to user inputs in real-time.
Integration with Form Libraries
Seamlessly integrate with popular form libraries like react-hook-form, formik, or fantastically/react-form, ensuring flexible and robust form handling.
Formity UI
Utilize a template featuring expertly designed components, making it easy and fast to create professional forms.
Advanced Multi-step Forms
Formity helps React developers create advanced multi-step forms with ease, allowing for personalized and interactive forms without the need for complex conditional logic.
Seamless Integration
Formity integrates smoothly with popular React form libraries like 'react-hook-form', 'formik', and 'semantic-ui-react-form', making it easy to incorporate into existing projects.
Dynamic Form Adaptation
Formity can adapt the form's questions based on the user's previous answers, providing a tailored experience.
Formity Component
The core 'Formity' component renders the multi-step form and requires props like 'schema', which defines the structure and behavior of the form, and 'onReturn', a callback for when the form is completed.
Live Preview
Allows you to see the form elements in action before implementing them. It helps in understanding how the components will look and behave in real scenarios.
Get Code
Provides easy access to the source code of the form components. This feature is useful for developers who want to quickly implement these components into their projects.
Powerful Logic
Formity enables the creation of customizable multi-step forms with control over conditions, loops, and variables, allowing forms to evolve based on user responses.
Component Customizability
Create highly customizable forms with no constraints on components, allowing fine-tuned usage of user-defined elements.
Formity UI
Offers a library of pre-designed components for rapid form development, facilitating an effortless and straightforward setup process.
Form Handling
Allows you to handle form submissions and input validation, streamlining the process of collecting and managing user data.
React Integration
Integrates seamlessly with React to provide easy-to-manage form states and validation, helping developers manage forms consistently with the React lifecycle.
Context API
Uses the Context API to handle global form states and actions, optimizing performance and ensuring all components have access to necessary data without prop drilling.
Schema Prop
Defines the structure and behavior of the multi-step form, allowing developers to control how the form components are organized and interact.
Inputs Prop
Defines values that can be used within the schema, in addition to those generated by the multi-step form itself, enhancing flexibility and customization.
Params Prop
Allows the use of dynamic values when rendering each form, enabling updates when new values are passed to each step, which increases interactivity.
onYield Callback
A callback function triggered when values are yielded, allowing for actions to be executed at specific stages of the form process.
onReturn Callback
A callback function executed when the form completes, which is useful for finalizing actions or capturing final form data.
InitialState
Defines the initial state of the multi-step form, providing a starting point for form interactions.
Field Definition
Fields define the specific data that can be collected and stored in a form. You can set different types of fields like text, number, date, boolean, etc., to structure data collection.
Validation Rules
Allows you to specify rules for validating the data input in forms. For example, you can require fields, set minimum or maximum values, and use regex patterns to ensure data accuracy.
Data Relationships
Supports defining relationships between different data schemas. This is useful for creating relational data models, enabling you to reference other data entities within a form.
Inputs Prop for Formity Component
Allows you to pass additional values into the schema using the 'inputs' prop of the 'Formity' component. You can define and manipulate these inputs within your schema to customize form behavior and data handling.
Schema Type Customization
Extend the 'schema' type by passing a custom 'inputs' type to define additional values available within the schema, enhancing what you can manage and process.
Multi-Step Form Integration
Seamlessly integrate additional values alongside those generated by the multi-step form itself, providing more comprehensive data handling.
Params Prop
The 'params' prop of the Formity component allows you to pass values intended for rendering each form, distinct from 'inputs' which update the form dynamically. This enables static value usage during form rendering.
Schema Definition
Defines a schema to use with the 'params' prop by specifying types like Schema, Form, Button, etc. This setup allows you to pass necessary structural information to the form.
Dynamic Form Rendering
Enables dynamic rendering by using 'params' to pass static configurations that dictate form layout, inputs, and options, enhancing flexibility and customization.