Translation Modal

TranslationModal opens a side panel showing all translatable fields with locale tabs. Translators can fill in all locales for all fields in one place.

Import


import { TranslationModal } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/TranslationModal";

Usage


import { TranslationModal } from "...";
 
<TranslationModal
  open={translationOpen}
  onOpenChange={setTranslationOpen}
  entity={entity}
  entityConfig={entityConfig}
  translatableFields={entityTranslatableFields}
  locales={["en", "fr", "ar"]}
  onSuccess={() => {
    setTranslationOpen(false);
    refresh();
  }}
/>

Props

Prop	Type	Description
`open`	`boolean`	Modal open state
`onOpenChange`	`(open: boolean) => void`	Open state handler
`entity`	`Entity`	Entity to translate
`entityConfig`	`EntityConfig`	Entity configuration
`translatableFields`	`FieldConfig[]`	Translatable field definitions
`locales`	`string[]`	Available locales
`onSuccess`	`() => void`	Called after save

For in-form locale switching on Add/Edit pages, use TranslatableFields instead.

Translation Modal

Import

Usage

Props

Related