Renderer

Introduction

The Figma Forms Renderer is a set of React components designed to render forms based on a predefined schema. It supports multi-page forms, validation, and customization options to fit various use cases.

Installation

npx @uj-vilag/figma-forms-renderer add

Run the command, and it will guide you through installing dependencies and scaffolding the required components and hooks, which you can customize as needed.

Usage

Wrap your form component with <FormProvider> and use the <FormRenderer> to display the form.

MyForm.tsx

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 />
      <NavigationButtons />
    </FormProvider>
  );
}

Use the useFormNavigation hook to navigate between form pages.

NavigationButtons.tsx

import { useFormNavigation } from "@/components/formProvider";

export function NavigationButtons() {
  const { nextPage, prevPage } = useFormNavigation();
  return (
    <div>
      <button onClick={prevPage}>Previous</button>
      <button onClick={nextPage}>Next</button>
    </div>
  );
}

FormProvider

Context provider for managing form state and behavior.

FormRenderer

Component that renders the form based on the provided schema.