Autor:
    Aymeric PINEAU
    Data utworzenia:2025-08-23Ostatnia aktualizacja:2025-08-23

    Tłumaczenie

    Definiowanie tłumaczeń

    Funkcja t w intlayer pozwala na deklarowanie treści w wielu językach. Funkcja ta zapewnia bezpieczeństwo typów, zgłaszając błąd, jeśli brakuje jakichkolwiek tłumaczeń, co jest szczególnie przydatne w środowiskach TypeScript.

    Oto przykład, jak zadeklarować treść z tłumaczeniami.

    **/*.content.ts
    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>;

    Konfiguracja lokalizacji

    Aby zapewnić prawidłowe zarządzanie tłumaczeniami, możesz skonfigurować akceptowane lokalizacje w pliku intlayer.config.ts. Ta konfiguracja pozwala zdefiniować języki, które Twoja aplikacja obsługuje:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";

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

export default config;

    Używanie tłumaczeń w komponentach React

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

    **/*.tsx
    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
    "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
    <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
    <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
    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
    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
    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
    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
);
    Deklaracja zawartościLiczba mnoga