Formity

Basic concepts about the main component of this package.

Formity

The Formity component is the main component of this package. It renders the multi-step form and it receives the following props:

• schema: Defines the structure and behavior of the multi-step form.

• inputs: Defines values that can be used within the schema in addition to the values generated by the multi-step form itself.

• params: Defines values that can be used when rendering each form of the multi-step form, allowing it to update when new values are passed.

• onYield: A callback function that is triggered when values are yielded.

• onReturn: A callback function that is triggered when the form completes.

• initialState: The initial state of the multi-step form.

import { useCallback, useState } from "react";

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

import { Data } from "./components";

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

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

  const onYield = useCallback<OnYield<Values>>((values) => {
    console.log(values);
  }, []);

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

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

  return (
    <Formity<Values> schema={schema} onYield={onYield} onReturn={onReturn} />
  );
}