React langsys-js-react

Een dunne React-koppeling bovenop langsys-js-typescript, gebouwd op hooks. De frase in je code is zowel de opzoeksleutel als de standaardtekst in de brontaal — geen sleutelbestand, geen extractiestap.

Add Langsys translation to this React app.

1. Read https://docs.langsys.dev/llms.txt, then follow
   https://docs.langsys.dev/learn/sdk/react/ for the install and setup.
2. The English text in the code is the translation key. Wrap user-facing
   strings as they are: no keys file, no extraction step, and no
   hand-written plural or gender branches (Langsys generates those).
3. Read the Langsys project id and API key from environment variables.
   The write key is for development and servers only; anything shipped
   to the browser gets the read-only key.
4. Keep brand names and user-generated content out of translation.

Installeren

npm install langsys-js-react

Nog geen project of sleutels? Met de Snelstart heb je beide in twee minuten.

Initialiseren

import { LangsysApp, createLocaleStore } from 'langsys-js-react';

const locale = createLocaleStore('en-US');

await LangsysApp.init({
  projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
  key: import.meta.env.VITE_LANGSYS_API_KEY, // read-only in the browser
  UserLocaleStore: locale,
});

Signalen lezen

Moet je de locale store — of een ander signaal van de basis-SDK, zoals een store die je buiten React deelt — reactief lezen? useSignal(store) abonneert en rendert je component opnieuw bij een wijziging. (Svelte heeft geen equivalent nodig: de signalen voldoen van nature aan het store-contract.)

import { useSignal, useCurrentLocale } from 'langsys-js-react';

// React re-renders only on React state — it can't watch a base-SDK
// signal by itself. useSignal(signal) subscribes and re-renders on change.
function LocaleBadge() {
  const selected = useSignal(locale);   // your createLocaleStore(...)
  const loaded = useCurrentLocale();    // shortcut for the loaded locale

  return <footer>selected {selected} · loaded {loaded}</footer>;
}

Interactieve playground

Bewerk de zin en categorie, stel de parameters in als velden of ruwe JSON, wissel daarna van locale en zie hoe de echte SDK live vertaalt.

const t = useT();
t("Hello, {name}! You have {count} new messages.", "Greetings", {"name":"Sarah","count":3})

import { useT } from 'langsys-js-react';

function Greeting({ name }) {
  const t = useT();
  return <p>{t('Hello, {name}!', 'Greetings', { name })}</p>;
}

Welke moet ik gebruiken?

Vuistregel: string → useT() · zin met opmaak → <Phrase> · gedeelte met opmaak → <Translate> · onaantastbaar → <DontTranslate>.

Elke contentcomponent live weergegeven aan de linkerkant; de code die hem produceert aan de rechterkant.

Bekijken De democlips voor deze primitieven staan voorlopig op de Svelte-pagina — de interface is identiek, alleen de syntaxis verschilt: <Translate> (1:04) · <Phrase> (1:06) · <DontTranslate> (0:34).

import { Translate } from 'langsys-js-react';

<Translate category="Home">
  <h3>Welcome to our store</h3>
  <p>Browse the catalog in your language.</p>
</Translate>

import { Phrase } from 'langsys-js-react';

<Phrase category="Cart" params={{ name: 'Sarah', count: 3 }}>
  Hi %name%, you have %count% items in your cart.
</Phrase>

import { DontTranslate, Translate } from 'langsys-js-react';

// Inside a translated region, the marked span alone stays verbatim.
<Translate category="Tour">
  <p>Welcome! <DontTranslate>This sentence always stays in English.</DontTranslate> Thanks for visiting!</p>
</Translate>

Geslachtsovereenkomst

Spaans, Frans of Russisch verbuigen {username} has been invited naar de persoon over wie het gaat. Langsys genereert die varianten tijdens het vertalen — op dezelfde manier als meervoudsvormen — en het argument is vernoemd naar de variabele, met _gender erachter: male, female of other. Geef het mee wanneer je het weet. Hoe het werkt en hoe je de zinnen vindt die het nodig hebben →

import { useT } from 'langsys-js-react';

function LikeNotice({ user }) {
  const t = useT();
  // Pass the agreement argument alongside the value it inflects.
  return <p>{t('{username} has been invited', 'Team', {
    username: user.name,
    username_gender: user.gender, // 'male' | 'female' | 'other'
  })}</p>;
}

Weet je het geslacht niet? Geef 'other' dan expliciet mee — dat is de neutrale tak. Ontbreekt die toch, dan kiest de SDK voor jou de other-tak (langsys-js-typescript 0.6.4 en later), zodat de zin nog steeds goed leest. TypeScript weigert momenteel username_gender in een inline params-object (fout TS2353; een oplossing wordt beoordeeld). Tot die beschikbaar is, bouw je eerst het params-object en geef je de variabele mee.

Server-side rendering

Haal de catalogus op de server op en geef hem door aan de client, zodat de SDK start zonder hem opnieuw op te halen. De SDK vertaalt in de browser, dus de op de server gerenderde HTML staat in de basistaal totdat de SDK start.

// The server fetches the catalog; the client init starts from it
// instead of fetching it again, and translates once it runs.
LangsysApp.init({
  projectid, key,
  UserLocaleStore: locale,
  initialTranslations,        // fetched on the server
  initialTranslationsLocale,  // fetched on the server
  ssrTokenStrategy: 'client',
});