React-översättningar

Localization should not make every component understand how translations are stored, synchronized or generated.

import { useKeykit } from '@keykithq/sdk/react';

export function EmptyState() {
  const { translate } = useKeykit();

  return (
    <section>
      <h2>{translate('projects.empty.title', 'No projects yet')}</h2>
      <p>{translate('projects.empty.description', 'Create a project to get started.')}</p>
    </section>
  );
}

The React component only asks for the translations it needs. Keykit handles the translation-key workflow around those calls.

When a developer introduces a translated label, there should not be a second checklist item saying to register that key somewhere else.

With delivery: "live", the React application can load translation data from Keykit rather than depending on checked-in locale files.

Translation changes can move independently from application source changes.

If you prefer translation resources to be bundled with the application, set delivery: "static" and pull the latest translations with the CLI.

Keykit project → CLI pull → static locale resources → React build

npx @keykithq/cli pull

Keykit can discover both static translation identifiers from the component. The developer does not need to mirror those keys manually in a second system before continuing the feature.

export function ProjectHeader({ project }) {
  const { translate } = useKeykit();
  return (
    <header>
      <span>{translate('projects.header.eyebrow', 'Project')}</span>
      <h1>{project.name}</h1>
      <Button>{translate('projects.actions.edit', 'Edit')}</Button>
    </header>
  );
}