@transglot/react

The React adapter for the transglot in-context editor. A thin layer over @transglot/incontext: a provider that installs the ALT+click overlay and mints the scoped session, a hook that returns the watermarked t, and the Shadow-DOM editing dialog (source/target, live QA, "Suggest with AI" plus a free TM chip, save).

This is the in-context EDITOR adapter. For runtime i18n in React (loading published bundles, useTranslations, <T>), use @transglot/react-i18n.

Install

npm install @transglot/react @transglot/incontext

Usage

<TransglotProvider> takes the in-context client coordinates:

| prop | required | meaning | | --- | --- | --- | | url | yes | origin of the transglot app, e.g. https://app.example.com | | publishableKey | yes | the publishable in-context key | | locale | no | the locale being edited | | enterOnMount | no | enter editing mode once the session mints (default false, see below) | | fetchImpl | no | injected fetch (tests / non-browser) |

import { TransglotProvider, useIncontextT } from '@transglot/react';

function App({ user }) {
  // Reviewers only. See "Who should see this" below.
  if (!user.mayReviewTranslations) {
    return <Page />;
  }

  return (
    <TransglotProvider url="https://app.example.com" publishableKey="incx_…" enterOnMount>
      <Page />
    </TransglotProvider>
  );
}

function Page() {
  const t = useIncontextT();
  return <h1>{t('home.title')}</h1>; // watermarked; ALT+click opens the editor
}

Who should see this

The editor is for reviewers. Do not mount it for the public.

Editing mode paints a floating bar on the page carrying your project's per-language completion percentages, with the human-versus-machine texture behind each one, plus a link to the transglot console. ALT+click then opens any string on the page for editing. On a public page, anyone can read all of it.

This provider wraps your whole app, so without a gate it runs for every anonymous visitor to your production site. Nothing in the SDK can tell a reviewer from a visitor, or production from staging, so:

• render the provider only for someone who may review translations, and
• pass enterOnMount to put that reviewer straight into editing mode.

Rendering the provider is deliberately not the same thing as turning editing mode on: without enterOnMount it installs the machinery and stays inert, and your own control calls session.enter() (see onReady) when you decide.

The underlying client contract is documented in @transglot/incontext.