GitHub

Обзор

useTranslations позволяет получать строковые переводы из словаря переводов.

Хук должен использоваться внутри компонента, обёрнутого в <GTProvider>.

const d = useTranslations(); // Получаем функцию перевода
d('greeting.hello'); // передаем идентификатор, чтобы получить перевод

useTranslations использует словарь для хранения всего переводимого контента. Это отличается от использования компонента <T> для перевода. Если вы планируете использовать для перевода только компоненты <T>, этот документ вам не потребуется.

Справка

Параметры

Prop

Type

Описание

Свойство	Описание
`id`	Необязательный префикс, добавляемый ко всем ключам переводов. Полезно при работе с вложенными значениями словаря.

Возвращает

Функцию перевода d, которая по заданному идентификатору возвращает переведённую версию соответствующей записи

(id: string, options?: DictionaryTranslationOptions) => React.ReactNode

Название	Тип	Описание
`id`	`string`	Идентификатор записи для перевода
`options?`	`DictionaryTranslationOptions`	Параметры перевода для настройки поведения `d`.

Примеры

Базовое использование словаря

Каждая запись в словаре переводится.

dictionary.jsx

const dictionary = {
  greeting: "Привет, Боб!", 
};
export default dictionary;

Когда нам нужно обратиться к этим записям, мы вызываем useTranslations. Он возвращает функцию, которая принимает ключ перевода из словаря.

Необходимо передать словарь в компонент GTProvider.

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

export default function TranslateGreeting() {
  const d = useTranslations(); 
  return (
    <GTProvider dictionary={dictionary}>
      <p>
        {d('greeting')} // [!code highlight]
      </p>
    </GTProvider>
  );
}

Использование переменных

Чтобы передать значения, нужно (1) задать идентификатор и (2) ссылаться на него при вызове функции d.

В этом примере мы используем {} для передачи переменных в переводы. В словаре мы задаём идентификатор {userName}.

dictionary.jsx

const dictionary = {
  greeting: "Привет, {userName}!", 
};
export default dictionary;

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const d = useTranslations();
  
  // Привет, Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice} // Привет, Alice // [!code highlight]
    </p>
  );
}

Использование префиксов

Мы можем использовать префиксы, чтобы переводить только часть словаря.

dictionary.jsx

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Привет, Боб",
    }
  }
};
export default dictionary;

Поскольку мы передали значение 'prefix1.prefix2' в хук useTranslations, все ключи получают префикс prefix1.prefix2:

UserDetails.jsx

import { useTranslations } from 'gt-react';

export default function UserDetails() {
  const d = useTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Примечания

Функция useTranslations позволяет получать переводы из словаря.
Хук useTranslations можно использовать только внутри компонента, обёрнутого в <GTProvider>.

Что дальше

Обзор

useTranslations позволяет получать строковые переводы из словаря переводов.

Хук должен использоваться внутри компонента, обёрнутого в <GTProvider>.

const d = useTranslations(); // Получаем функцию перевода
d('greeting.hello'); // передаем идентификатор, чтобы получить перевод

Справка

Параметры

Prop

Type

Описание

Свойство	Описание
`id`	Необязательный префикс, добавляемый ко всем ключам переводов. Полезно при работе с вложенными значениями словаря.

Возвращает

(id: string, options?: DictionaryTranslationOptions) => React.ReactNode

Название	Тип	Описание
`id`	`string`	Идентификатор записи для перевода
`options?`	`DictionaryTranslationOptions`	Параметры перевода для настройки поведения `d`.

Примеры

Базовое использование словаря

Каждая запись в словаре переводится.

dictionary.jsx

const dictionary = {
  greeting: "Привет, Боб!", 
};
export default dictionary;

Необходимо передать словарь в компонент GTProvider.

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

export default function TranslateGreeting() {
  const d = useTranslations(); 
  return (
    <GTProvider dictionary={dictionary}>
      <p>
        {d('greeting')} // [!code highlight]
      </p>
    </GTProvider>
  );
}

Использование переменных

Чтобы передать значения, нужно (1) задать идентификатор и (2) ссылаться на него при вызове функции d.

В этом примере мы используем {} для передачи переменных в переводы. В словаре мы задаём идентификатор {userName}.

dictionary.jsx

const dictionary = {
  greeting: "Привет, {userName}!", 
};
export default dictionary;

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const d = useTranslations();
  
  // Привет, Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice} // Привет, Alice // [!code highlight]
    </p>
  );
}

Использование префиксов

Мы можем использовать префиксы, чтобы переводить только часть словаря.

dictionary.jsx

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Привет, Боб",
    }
  }
};
export default dictionary;

Поскольку мы передали значение 'prefix1.prefix2' в хук useTranslations, все ключи получают префикс prefix1.prefix2:

UserDetails.jsx

import { useTranslations } from 'gt-react';

export default function UserDetails() {
  const d = useTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Примечания

Функция useTranslations позволяет получать переводы из словаря.
Хук useTranslations можно использовать только внутри компонента, обёрнутого в <GTProvider>.

Что дальше

Обзор

useTranslations позволяет получать строковые переводы из словаря переводов.

Хук должен использоваться внутри компонента, обёрнутого в <GTProvider>.

const d = useTranslations(); // Получаем функцию перевода
d('greeting.hello'); // передаем идентификатор, чтобы получить перевод

Справка

Параметры

Prop

Type

Описание

Свойство	Описание
`id`	Необязательный префикс, добавляемый ко всем ключам переводов. Полезно при работе с вложенными значениями словаря.

Возвращает

(id: string, options?: DictionaryTranslationOptions) => React.ReactNode

Название	Тип	Описание
`id`	`string`	Идентификатор записи для перевода
`options?`	`DictionaryTranslationOptions`	Параметры перевода для настройки поведения `d`.

Примеры

Базовое использование словаря

Каждая запись в словаре переводится.

dictionary.jsx

const dictionary = {
  greeting: "Привет, Боб!", 
};
export default dictionary;

Необходимо передать словарь в компонент GTProvider.

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

export default function TranslateGreeting() {
  const d = useTranslations(); 
  return (
    <GTProvider dictionary={dictionary}>
      <p>
        {d('greeting')} // [!code highlight]
      </p>
    </GTProvider>
  );
}

Использование переменных

Чтобы передать значения, нужно (1) задать идентификатор и (2) ссылаться на него при вызове функции d.

В этом примере мы используем {} для передачи переменных в переводы. В словаре мы задаём идентификатор {userName}.

dictionary.jsx

const dictionary = {
  greeting: "Привет, {userName}!", 
};
export default dictionary;

TranslateGreeting.jsx

import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const d = useTranslations();
  
  // Привет, Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice} // Привет, Alice // [!code highlight]
    </p>
  );
}

Использование префиксов

Мы можем использовать префиксы, чтобы переводить только часть словаря.

dictionary.jsx

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Привет, Боб",
    }
  }
};
export default dictionary;

Поскольку мы передали значение 'prefix1.prefix2' в хук useTranslations, все ключи получают префикс prefix1.prefix2:

UserDetails.jsx

import { useTranslations } from 'gt-react';

export default function UserDetails() {
  const d = useTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Примечания

Функция useTranslations позволяет получать переводы из словаря.
Хук useTranslations можно использовать только внутри компонента, обёрнутого в <GTProvider>.

useTranslations

На этой странице

useTranslations

На этой странице

useTranslations

На этой странице

GitHubПоставить звезду на GitHub

GitHubПоставить звезду на GitHub

Поставить звезду на GitHub

Поставить звезду на GitHub