@anan.k/intl-message-editable

Editable translation UI for react-intl.

Compat import

If you want a react-intl-like import surface, use:

import { IntlProvider, FormattedMessage, useIntl, injectIntl } from '@anan.k/intl-message-editable/react-intl';

This keeps most of the old API shape.

• FormattedMessage becomes clickable when edit mode is enabled
• useIntl() still returns the normal intl object
• useIntl() also adds getEditableProps() and formatEditableMessage()

Important:

• intl.formatMessage() and intl.messages[key] return strings, so they cannot become clickable by themselves
• for string-based rendering, wrap the rendered element and spread intl.getEditableProps(...)

Install

npm install @anan.k/intl-message-editable

Peer deps: react, react-dom, react-intl, reactstrap

Usage

import { EditableIntlProvider, IntlMessageEditable, useEditableIntl } from '@anan.k/intl-message-editable';

function ToggleButton() {
  const { isEditEnabled, setIsEditEnabled } = useEditableIntl();
  return (
    <button type="button" onClick={() => setIsEditEnabled(!isEditEnabled)}>
      {isEditEnabled ? 'Disable edit' : 'Enable edit'}
    </button>
  );
}

function App({ saveChange, reloadLangJson, companyId, systemAbbr }) {
  return (
    <EditableIntlProvider
      onSave={async (payload) => {
        await saveChange(payload);
        await reloadLangJson();
      }}
      initialCompanyId={companyId}
      initialSystemAbbr={systemAbbr}
      defaultLanguageCode="th-TH"
      languages={["th-TH", "en-US"]}
    >
      <ToggleButton />
      <IntlMessageEditable id="menu.home" defaultMessage="Home" />
    </EditableIntlProvider>
  );
}

API

EditableIntlProvider props

• onSave(payload, ctx): required async callback
• initialCompanyId: optional
• initialSystemAbbr: optional
• defaultLanguageCode: default th-TH
• languages: default [th-TH, en-US]
• storageKey: default enableEditTranslation
• modalTitle, submitText, closeText: UI text

useEditableIntl()

• isEditEnabled
• setIsEditEnabled(boolean)
• openEditor(payload)
• closeEditor()