Params

Learn how to pass values that can be used when rendering each form.

The params prop of the Formity component allows us to pass values meant to be used when rendering each form. Unlike the inputs prop, these values are exclusively for rendering purposes, and any changes to them will dynamically update the form.

import { useCallback, useState } from "react";

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

import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

import { Form } from "./components/form";
import { Output } from "./components/output";

type Schema = {
  render: React.ReactNode;
  struct: [s.Form<{ language: string }>, s.Return<{ language: string }>];
  inputs: {
    languages: { label: string; value: string }[];
    defaultLanguage: string;
  };
  params: {
    heading: string;
  };
};

const flow: Flow<Schema> = [
  {
    form: {
      fields: ({ defaultLanguage }) => ({
        language: [defaultLanguage, []],
      }),
      render: ({ fields, values, params, onBack, onNext }) => (
        <Form
          key="language"
          defaultValues={fields}
          resolver={zodResolver(
            z.object({
              language: z.string(),
            }),
          )}
          heading={params.heading}
          content={[
            {
              type: "select",
              name: "language",
              label: "Language",
              placeholder: "Select an option",
              options: values.languages,
            },
          ]}
          buttons={{
            back: null,
            next: "Next",
          }}
          onBack={onBack}
          onNext={onNext}
        />
      ),
    },
  },
  {
    return: ({ language }) => ({ language }),
  },
];

export default function App() {
  const [output, setOutput] = useState<ReturnOutput<Schema> | null>(null);

  const onReturn = useCallback<OnReturn<Schema>>((output) => {
    setOutput(output);
  }, []);

  if (output) {
    return <Output output={output} onStart={() => setOutput(null)} />;
  }

  return (
    <Formity<Schema>
      flow={flow}
      inputs={{
        languages: [
          { label: "English", value: "en" },
          { label: "Spanish", value: "es" },
          { label: "Catalan", value: "ca" },
        ],
        defaultLanguage: "en",
      }}
      params={{
        heading: "What language do you speak the most?",
      }}
      onReturn={onReturn}
    />
  );
}