Skip to content

[FEAT] Allow passing translatable strings to the forms #105

@MurzNN

Description

@MurzNN

Is your feature request related to a problem? Please describe.
For now, the form schema expects strings for form labels, descriptions, and other text. But any app that has more than one language should translate each text on the form.

Therefore, every text is usually wrapped in a translation React Element like <Trans>Hello world</Trans>.

But if we try to pass the React Element instead of a string to the BuzzForm field, the form render starts to fail wiith error:

Runtime InternalError
too much recursion

src/components/buzzform/form.tsx (201:7) @ FormFields

  199 |   return (
  200 |     <div className={cn("flex flex-col gap-4", className)}>
> 201 |       <RenderFields fields={fields} form={form} registry={registry} />
      |       ^
  202 |     </div>
  203 |   );
  204 | }

The same feature is needed for the labels in the "select" field options and in all other places where we pass some text that will appear in the UI.

This issue makes BuzzForm unusable for every multi-lingual site, so it's crucial to find a solution for this issue.

Describe the solution you'd like
Would be great to allow accepting React Elements as the string values, and render them as a regular React component.

With the framework-agnostic approach separating the form and the ui, it will probably be hard to implement, but a solution is really needed!

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions