React langsys-js-react

langsys-js-typescript üzerine kurulu, hook tabanlı ince bir React bağlayıcısı. Kodunuzdaki ifade hem arama anahtarı hem de temel dildeki varsayılan metindir — anahtar dosyası yok, ayıklama adımı yok.

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.

Kurulum

npm install langsys-js-react

Henüz projeniz veya anahtarlarınız yok mu? Hızlı başlangıç ikisini de iki dakikada sağlar.

Başlat

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,
});

Sinyalleri okuma

Yerel ayar deposunu ya da React dışında paylaştığınız bir depo gibi herhangi bir temel SDK sinyalini reaktif olarak okumanız mı gerekiyor? useSignal(store) abone olur ve değişiklik olduğunda bileşeninizi yeniden oluşturur. (Svelte için eşdeğerine gerek yoktur: sinyaller onun depo sözleşmesini doğal olarak karşılar.)

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>;
}

Etkileşimli deneme alanı

İfadeyi ve kategoriyi düzenleyin, parametreleri alan olarak veya ham JSON olarak ayarlayın, ardından dili değiştirin ve gerçek SDK'nın canlı olarak çeviri yapmasını izleyin.

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>;
}

Hangisini kullanmalıyım?

Pratik kural: dize → useT() · biçimlendirme içeren cümle → <Phrase> · biçimlendirme içeren bölge → <Translate> · dokunulmaz → <DontTranslate>.

Her içerik bileşeni solda canlı olarak oluşturulur; onu üreten kod sağdadır.

İzle Bu temel yapılara ait demo kesitleri şimdilik Svelte sayfasında yer alıyor — arayüz aynı, yalnızca sözdizimi farklı: <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>

Cinsiyet uyumu

İspanyolca, Fransızca veya Rusça {username} has been invited ifadesini, söz konusu kişiye göre çekimler. Langsys bu dalları çeviri sırasında, çoğulları oluşturduğu gibi oluşturur; argümanın adı değişkenin adına _gender eklenerek verilir: male, female veya other. Bildiğiniz her durumda iletin. Nasıl çalışır ve buna ihtiyaç duyan ifadeler nasıl bulunur →

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>;
}

Cinsiyeti bilmiyor musunuz? 'other' değerini açıkça iletin; bu, nötr daldır. Yine de eksikse SDK sizin yerinize other dalını kullanır (langsys-js-typescript 0.6.4 ve sonrası), böylece cümle yine doğru okunur. TypeScript şu anda satır içi params nesnesindeki username_gender alanını reddediyor (TS2353 hatası; düzeltme inceleme aşamasında). Düzeltme yayımlanana kadar önce params nesnesini oluşturun ve değişkeni iletin.

Sunucu tarafı oluşturma

Kataloğu sunucuda getirip istemciye aktarın; böylece SDK kataloğu yeniden getirmeden başlar. SDK çeviriyi tarayıcıda yapar, bu nedenle sunucuda oluşturulan HTML, SDK başlayana kadar temel dilde kalır.

// 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',
});