useFormity

Basic concepts about the main hook of this package.

useFormity

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

• flow: 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).
• history: A boolean to track previous states for back navigation (defaults to true).
• initialState: The initial state of the multi-step 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).

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

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

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

  const form = useFormity({ flow, onYield, onReturn });

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

  return form;
}