Yazar:
    Oluşturma:2025-09-07Son güncelleme:2025-09-07

    React Entegrasyonu: useIntlayer Hook Dokümantasyonu

    Bu bölüm, React uygulamalarında içerik yerelleştirmesini etkinleştirmek için useIntlayer hook'unun nasıl kullanılacağına ilişkin detaylı rehberlik sağlar.

    React'te Örnek Kullanım

    React bileşeninde useIntlayer hook'unun gösterimi:

    src/app.tsx
    import type { FC } from "react";
import { ClientComponentExample, ServerComponentExample } from "@components";
import { IntlayerProvider } from "react-intlayer";
import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";
import { Locales } from "intlayer";

const App: FC<{ locale: Locales }> = ({ locale }) => {
  const content = useIntlayer("homepage", locale);

  return (
    <>
      <p>{content.introduction}</p>
      <IntlayerProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};
    src/components/ComponentExample.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const ComponentExample: FC = () => {
  const content = useIntlayer("component-example");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};
    src/components/ServerComponentExample.tsx
    import { useIntlayer } from "react-intlayer/server";

const ServerComponentExample = () => {
  const content = useIntlayer("server-component");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

    Ek Kaynaklar

    • Intlayer Görsel Düzenleyici: Daha sezgisel içerik yönetimi için görsel düzenleyici dokümantasyonuna burada bakın.

    Bu bölüm, React uygulamalarında useIntlayer hook'unun entegrasyonuna özel olarak odaklanır, yerelleştirme sürecini basitleştirir ve farklı yerel ayarlar arasında içerik tutarlılığını sağlar.

    useI18n
    useLocale