react-intlayer: Пакет NPM для интернационализации (i18n) React-приложения

    Intlayer — это набор пакетов, разработанных специально для JavaScript-разработчиков. Он совместим с такими фреймворками, как React, React и Express.js.

    Пакет react-intlayer позволяет интернационализировать ваше React-приложение. Он предоставляет провайдеры контекста и хуки для интернационализации в React.

    Почему важно интернационализировать ваше React-приложение?

    Интернационализация вашего React-приложения необходима для эффективного обслуживания глобальной аудитории. Это позволяет вашему приложению предоставлять контент и сообщения на предпочтительном языке каждого пользователя. Эта возможность улучшает пользовательский опыт и расширяет охват вашего приложения, делая его более доступным и актуальным для людей из разных языковых сообществ.

    Почему стоит интегрировать Intlayer?

    • Управление контентом на основе JavaScript: Используйте гибкость JavaScript для эффективного определения и управления вашим контентом.
    • Безопасная типизация: Используйте TypeScript, чтобы гарантировать точность и отсутствие ошибок в определении контента.
    • Интегрированные файлы контента: Держите переводы рядом с соответствующими компонентами, улучшая их поддержку и ясность.

    Установка

    Установите необходимый пакет, используя предпочитаемый менеджер пакетов:

    bash
    npm install react-intlayer

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

    С помощью Intlayer вы можете объявлять ваш контент структурированным образом в любом месте вашего кода.

    По умолчанию Intlayer сканирует файлы с расширением .content.{ts,tsx,js,jsx,mjs,cjs}.

    Вы можете изменить расширение по умолчанию, установив свойство contentDir в файле конфигурации.

    bash
    .├── intlayer.config.ts└── src    └── components        ├── Component1        │   ├── index.content.ts        │   └── index.tsx        └── Component2            ├── index.content.ts            └── index.tsx

    Объявление контента

    react-intlayer предназначен для работы с пакетом intlayer. intlayer — это пакет, который позволяет вам объявлять контент в любом месте вашего кода. Он преобразует многоязычные объявления контента в структурированные словари, которые легко интегрируются в ваше приложение.

    Вот пример объявления контента:

    tsx
    import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",      ru: "Привет, мир",    }),    numberOfCar: enu({      "<-1": "Меньше минус одной машины",      "-1": "Минус одна машина",      "0": "Нет машин",      "1": "Одна машина",      ">5": "Несколько машин",      ">19": "Много машин",    }),  },} satisfies Dictionary;export default component1Content;

    Использование контента в коде

    После объявления контента вы можете использовать его в вашем коде. Вот пример использования контента в React-компоненте:

    src/components/Component1Example.tsx
    "use client";import type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // Создание связанного объявления контента  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

    Освоение интернационализации вашего React-приложения

    Intlayer предоставляет множество функций, чтобы помочь вам интернационализировать ваше React-приложение.

    Чтобы узнать больше об этих функциях, обратитесь к руководству по интернационализации React (i18n) с Intlayer и Vite и React для приложений на Vite и React или к руководству по интернационализации React (i18n) с Intlayer и React (CRA) для приложений на Create React App.

    Функции, предоставляемые пакетом react-intlayer

    Пакет react-intlayer также предоставляет несколько функций, чтобы помочь вам интернационализировать ваше приложение.

    Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

    Ссылка на документацию GitHub
    tt