Пакет react-intlayer надає необхідні інструменти для інтеграції Intlayer у React-додатки. Він включає контекстні провайдери, хуки та компоненти для роботи з багатомовним контентом.

Встановлення

bash

Копіювати код

Скопіюйте код у буфер обміну

npm install react-intlayer

npm install react-intlayer

Експорти

Провайдери

Імпорт:

tsx

Копіювати код

Скопіюйте код у буфер обміну

import "react-intlayer";

import "react-intlayer";

Показати весь вміст таблиці

Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані

Компонент	Опис	Пов'язаний документ
`IntlayerProvider`	Головний провайдер, який обгортає ваш застосунок і надає контекст Intlayer. За замовчуванням містить підтримку редактора.	IntlayerProvider
`IntlayerProviderContent`	Компонент-провайдер, орієнтований на контент без функцій редактора. Використовуйте його, коли вам не потрібен візуальний редактор.	-
`HTMLProvider`	Провайдер для налаштувань інтернаціоналізації, пов'язаних з HTML. Дозволяє перевизначати компоненти для HTML-тегів.	-

Хуки

Імпорт:

tsx

Копіювати код

Скопіюйте код у буфер обміну

import "react-intlayer";

import "react-intlayer";

Показати весь вміст таблиці

Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані

Хук	Опис	Пов'язаний документ
`useIntlayer`	Клієнтський hook, який вибирає словник за його ключем і повертає його вміст. Використовує локаль із контексту, якщо вона не вказана.	useIntlayer
`useDictionary`	Хук, який перетворює об'єкт словника та повертає вміст для поточної локалі. Обробляє переклади `t()`, enumerations, тощо.	useDictionary
`useDictionaryAsync`	Хук, який обробляє асинхронні словники. Приймає мапу словників, що повертають Promise, і вирішує її для поточної локалі.	-
`useDictionaryDynamic`	Хук, що обробляє динамічні словники, завантажувані за ключем. Використовує React Suspense для обробки станів завантаження.	-
`useLocale`	Клієнтський хук для отримання поточної локалі, локалі за замовчуванням, доступних локалей та функції для оновлення локалі.	useLocale
`useLocaleBase`	Хук для отримання поточної локалі та всіх пов'язаних полів (locale, defaultLocale, availableLocales, setLocale) з контексту.	-
`useRewriteURL`	Клієнтський хук для керування переписуванням URL. Якщо для поточного pathname і локалі існує правило переписування, він оновить URL.	useRewriteURL
`useI18n`	Хук, що надає функцію перекладу `t()` для доступу до вкладених даних за ключем. Наслідує патерн i18next/next-intl.	useI18n
`useIntl`	Хук, який надає об'єкт `Intl`, прив'язаний до локалі. Автоматично підставляє поточну локаль і використовує оптимізоване кешування.	-
`useLocaleStorage`	Хук, який забезпечує збереження локалі у local storage або cookies. Повертає функції отримання та встановлення.	-
`useLocaleCookie`	Застарілий. Використовуйте натомість `useLocaleStorage`. Хук, який керує збереженням локалі в cookies.	-
`useLoadDynamic`	Хук для завантаження динамічних словників за допомогою React Suspense. Приймає ключ і проміс, кешує результати.	-
`useIntlayerContext`	Хук, який надає поточні значення контексту клієнта Intlayer (locale, setLocale тощо).	-
`useHTMLContext`	Хук для доступу до перевизначень HTML-компонентів із контексту HTMLProvider.	-

Функції

Імпорт:

tsx

Копіювати код

Скопіюйте код у буфер обміну

import "react-intlayer";

import "react-intlayer";

Показати весь вміст таблиці

Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані

Функція	Опис	Пов'язаний документ
`t`	Функція перекладу на стороні клієнта, що повертає переклад наданого багатомовного вмісту. Використовує локаль із контексту, якщо не вказано.	переклад
`getDictionary`	Обробляє об'єкти словника та повертає вміст для вказаної локалі. Обробляє переклади `t()`, переліки, Markdown, HTML тощо.	-
`getIntlayer`	Отримує словник за його ключем із згенерованої декларації та повертає його вміст для вказаної локалі. Оптимізована версія `getDictionary`.	-
`setLocaleInStorage`	Встановлює локаль у сховищі (local storage або cookie залежно від конфігурації).	-
`setLocaleCookie`	Застаріло. Використовуйте `setLocaleInStorage` натомість. Встановлює локаль у cookie.	-
`localeInStorage`	Отримує локаль зі сховища (localStorage або cookie).	-
`localeCookie`	Застаріле. Використовуйте `localeInStorage` натомість. Отримує локаль з cookie.	-

Компоненти

Імпорт:

tsx

Копіювати код

Скопіюйте код у буфер обміну

import "react-intlayer";

import "react-intlayer";

або

tsx

Копіювати код

Скопіюйте код у буфер обміну

import "react-intlayer/markdown";

import "react-intlayer/markdown";

Показати весь вміст таблиці

Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані

Компонент	Опис	Пов'язаний документ
`MarkdownProvider`	Провайдер для контексту рендерингу Markdown. Дозволяє перевизначати компоненти для елементів markdown.	-
`MarkdownRenderer`	Відтворює вміст markdown з користувацькими компонентами. Підтримує всі стандартні можливості markdown та синтаксис, специфічний для Intlayer.	MarkdownRenderer

Типи

Імпорт:

tsx

Копіювати код

Скопіюйте код у буфер обміну

import "react-intlayer";

import "react-intlayer";

Показати весь вміст таблиці

Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані

Тип	Опис
`IntlayerNode`	Тип, що представляє вузол у дереві контенту Intlayer. Використовується для типобезпечної (type-safe) маніпуляції контентом.

Серверна сторона (react-intlayer/server)

Імпорт:

tsx

Копіювати код

Скопіюйте код у буфер обміну

import "react-intlayer/server";

import "react-intlayer/server";

Показати весь вміст таблиці

Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані

Експорт	Тип	Опис
`IntlayerServerProvider`	`Component`	Провайдер для рендерингу на сервері.
`IntlayerServer`	`Component`	Серверна обгортка для контенту Intlayer.
`t`	`Function`	Серверна версія функції перекладу.
`useLocale`	`Hook`	Хук для доступу до локалі на серверній стороні.
`useIntlayer`	`Hook`	Серверна версія `useIntlayer`.
`useDictionary`	`Hook`	Серверна версія `useDictionary`.
`useI18n`	`Hook`	Серверна версія `useI18n`.
`locale`	`Function`	Функція для отримання або встановлення локалі на сервері.

Чому Intlayer?