intlayer'daki t fonksiyonu, içeriği birden fazla dilde bildirmenizi sağlar. Bu fonksiyon tür güvenliğini sağlar ve herhangi bir çeviri eksikse hata verir, bu özellikle TypeScript ortamlarında kullanışlıdır.

İşte çevirilerle içerik bildirme örneği.

**/*.content.ts

Kodu kopyala

Kodu panoya kopyala

import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

Yerel Ayarlar için Yapılandırma

Uygun çeviri işlemini sağlamak için, intlayer.config.ts'de kabul edilen yerel ayarları yapılandırabilirsiniz. Bu yapılandırma, uygulamanızın desteklediği dilleri tanımlamanızı sağlar:

intlayer.config.ts

Kodu kopyala

Kodu panoya kopyala

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

React Bileşenlerinde Çevirileri Kullanma

With react-intlayer, you can use translations in React components. Here's an example:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

This component fetches the corresponding translation based on the current locale set in your application.

With next-intlayer, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With vue-intlayer, you can use translations in Vue components. Here's an example:

**/*.vue

Kodu kopyala

Kodu panoya kopyala

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("multi_lang");</script><template><div>  <p>{{ content.welcomeMessage }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("multi_lang");</script><template><div>  <p>{{ content.welcomeMessage }}</p></div></template>

With svelte-intlayer, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:

**/*.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("multi_lang");</script><div><p>{$content.welcomeMessage}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("multi_lang");</script><div><p>{$content.welcomeMessage}</p></div>

With preact-intlayer, you can use translations in Preact components. Here's an example:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With solid-intlayer, you can use translations in SolidJS components. Here's an example:

**/*.tsx

Kodu kopyala

Kodu panoya kopyala

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const MyComponent: Component = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With angular-intlayer, you can use translations in Angular components. Here's an example:

app.component.ts

Kodu kopyala

Kodu panoya kopyala

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my-component",template: `  <div>    <p>{{ content().welcomeMessage }}</p>  </div>`,})export class MyComponent {content = useIntlayer("multi_lang");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my-component",template: `  <div>    <p>{{ content().welcomeMessage }}</p>  </div>`,})export class MyComponent {content = useIntlayer("multi_lang");}

With vanilla-intlayer, you can use translations by subscribing to content changes. Here's an example:

**/*.ts

Kodu kopyala

Kodu panoya kopyala

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
document.getElementById("welcome-message")!.textContent = String(
  newContent.welcomeMessage
);
});

// Initial render
document.getElementById("welcome-message")!.textContent = String(
content.welcomeMessage
);

Özel İçerik Nesneleri

intlayer, çeviri için özel içerik nesnelerini destekler ve tür güvenliğini sağlarken daha karmaşık yapılar tanımlamanızı sağlar. İşte özel bir nesne ile örnek:

**/*.content.ts

Kodu kopyala

Kodu panoya kopyala

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

İçerik Beyanı

Çoğul