Formity operators

Usage

How to use Formity operators when using Expry.

Overview

We may face the need of having to store forms in databases. However, existing datbases often fall short for these kind of use cases.

Using JSON to represent forms simplifies the storage process. To support this approach, we offer a package with operators to map JSON to Formity schema elements.

Formity is an advanced form-building package designed to help React developers create advanced multi-step forms. To learn more about it check out the Formity website.

Installation

To install this package you have to run the following command.

npm install @expry/formity

Usage

To use the Formity operators we need to include them when creating the expry function.

import { createExpry } from "@expry/system";

import { formityOperations, FormityOperations } from "@expry/formity";

const expry = createExpry<[FormityOperations]>(formityOperations);

However, these operators won't be enough most of the time. For this reason, we will likely end up with something like this.

import { createExpry } from "@expry/system";
import { basicOperations, BasicOperations } from "@expry/basic";
import { formityOperations, FormityOperations } from "@expry/formity";

import { componentsOperations, ComponentsOperations } from "./components";
import { zodOperations, ZodOperations } from "./zod";

type Operations = [
  BasicOperations,
  FormityOperations,
  ComponentsOperations,
  ZodOperations,
];

export const expry = createExpry<Operations>(
  basicOperations,
  formityOperations,
  componentsOperations,
  zodOperations,
);

We will need to define operators for our components and for our validation rules. To make this simpler for you, I created a template that contains everything done for you.

You can clone this template by going to the Formity website or by doing the following.

git clone https://github.com/martiserra99/formity-react-template

The schema that is created with JSON is defined in the schema-expry folder. You can use it by updating the schema file you import from App.tsx.

import { useCallback, useState } from "react";

import { Formity, OnReturn, ReturnOutput } from "@formity/react";

import { Data } from "./components";

import { schema, Values } from "./schema-expry";

export default function App() {
  const [values, setValues] = useState<ReturnOutput<Values> | null>(null);

  const onReturn = useCallback<OnReturn<Values>>((values) => {
    setValues(values);
  }, []);

  if (values) {
    return <Data data={values} onStart={() => setValues(null)} />;
  }

  return <Formity<Values> schema={schema} onReturn={onReturn} />;
}
Variable
Schema