Formity

Basic concepts about the main component of this package.

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 (optional).
params: Defines values that can be used when rendering each form (optional).
onYield: A callback function that is triggered when values are yielded (optional).
onReturn: A callback function that is triggered when the form completes (optional).
initialState: The initial state of the multi-step form (optional).

import { useCallback, useState } from "react";

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

import { Data } from "./components";

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

export default function App() {
  const [values, setValues] = useState<ReturnOutput<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} />
  );
}