Components
Learn about the components provided by the Figma Forms Renderer.
FormProvider
The <FormProvider> component is a context provider that wraps your form and provides the necessary state and functionality for rendering and managing the form.
Pass a JsonForm object as a prop to initialize the form.
import { FormProvider } from "@/components/formProvider";
import { FormRenderer } from "@/components/formRenderer";
import type { JsonForm } from "@uj-vilag/figma-forms-types";
export function MyForm({ form }: { form: JsonForm }) {
return (
<FormProvider form={form}>
<FormRenderer />
</FormProvider>
);
}Hooks
Use the following hooks to interact with the form state and behavior within components wrapped by FormProvider:
useFormData
Access and manipulate the form data.
useFormNavigation
Navigate between different pages of the form.
useFormState
Manage the overall state of the form.
useFormValidation
Validate form fields and handle validation errors.
useFormStatus
Track the submission status of the form.
FormRenderer
The <FormRenderer> component is responsible for rendering the form based on the schema provided to the <FormProvider>. The component is a wrapper for the <JsonForms> component from the JSON Forms library.
export function FormRenderer() {
const { currentPage } = useFormNavigation();
const { formState, setFormState } = useFormState();
const { setErrors, validationMode } = useFormValidation();
const [schema, uischema] = currentPage.schema;
return (
<JsonForms
schema={schema}
uischema={uischema}
data={formState}
renderers={renderers}
i18n={{ translate }}
onChange={({
data,
errors,
}: {
data: FormState;
errors: ErrorObject[];
}) => {
setFormState(data);
setErrors(errors);
}}
validationMode={validationMode}
/>
);
}See the JsonForms documentation for more details.
Form elements
The form controls and layouts are defined in the formRenderer/controls and formRenderer/layouts directories, then registered in the renderers array.
The controls use the @uj-vilag/dap-components package by default, but you can customize them as needed.
Error messages
The translate function is used to provide localized error messages for validation errors.
const translations: Record<string, string> = {
// Error messages
"error.required": "A mező kitöltése kötelező",
"error.minLength": "Túl rövid",
"error.maxLength": "Túl hosszú",
"error.pattern": "Érvénytelen formátum",
"error.format": "Érvénytelen formátum",
"error.minimum": "Az érték túl kicsi",
"error.maximum": "Az érték túl nagy",
"error.enum": "Válasszon a lehetőségek közül",
};
const translate: Translator = ((
key: string,
defaultMessage: string | undefined
) => {
return translations[key] ?? defaultMessage;
}) as Translator;In a later version the error messages will be parsed as well from the Figma file to allow customization on a per-field basis.