Пусть реакция говорит на вашем языке

Заставить ваш сайт говорить с вашими пользователями на их языке — непростая задача.

Некоторые недооценивают его, хотя там особо ничего не нужно делать: взять локаль/предпочитаемый язык пользователя, получить файл с вашим переводом, выполнить синтаксический анализ и настройку.
Звучит прямолинейно, и это так. В современном мире библиотек представлений, полноценных фреймворков, удобных инструментов, которые помогают, это то, что действительно повышает ваш опыт.

https://github.com/cristianbote/react-translate-json

«Этот сайт нужно перевести»

Я впервые столкнулся с требованием «этот сайт нужно перевести» несколько лет назад, когда работал над сайтом на AngularJS. Во время гугления я наткнулся на пакет angular-translate для Pascal, и это открыло мне глаза: простой, понятный API и действительно хорошо документированный.

Вы не могли просить больше, чем это. У вас есть ключи, вы установили свою локаль, и вы можете напрямую использовать ее через конвейеры или простые директивы.

Моя версия

Использование его в AngularJS было прекрасным, потому что я не нашел ничего более полезного, чем то, что он предлагал, но отказ от AngularJS оставил пробел в моих повседневных потребностях в переводе. Поэтому я пытался воссоздать его всякий раз, когда мне нужна была эта парадигма; следовательно, в реакции.

Итак, давайте немного поговорим о том, что здесь происходит на самом деле.

Сначала импортируйте нужную функцию и компонент. Звоните setConfig с pathPrefix в свою папку с переводами. По умолчанию это ищет файлы .json, но вы можете указать расширение, если это не JSON. Допустим, вы обслуживаете все свои статические ресурсы из CDN, тогда вы легко можете получить следующее:

На самом деле здесь все идет, пока браузер может это запросить.

Во-вторых, вам нужно использовать <TranslateComponent />, чтобы получить значение. Это прокси-компонент, который не имеет никакого следа в DOM и может использоваться либо через render, либо просто позволить ему отображать текст внутри диапазона.

Хорошо, но мне нужно параметризовать значения

Я полностью понимаю. У кого есть статические переводы? Никто, вот кто. Как и в Паскале, вы можете использовать рули, {{myProp}}, внутри ваших значений.

Любые вопросы?

Расширенное использование

Итак, у вас может быть некоторая настройка, где, скажем, ваши переводы генерируются динамически с помощью более сложного вызова. Это могло случиться. Пока на выходе есть объект с ключами и значениями, все в порядке. Вы можете сделать:

По сути, вам не нужны никакие обозначения локали или статические файлы. Метод setConfig, все, что он делает, это гарантирует наличие вызываемой конечной точки, которая может/должна вернуть некоторый JSON.

Другое использование, которое может оказаться полезным, — это метод «translate».

Окончание

Суть в том, что этот пакет предназначен для реагирования, но может использоваться в любой другой среде или контексте.

Так что, надеюсь, это привлекло ваше внимание, и вы дадите ему шанс. Вы можете найти код на github, npm и yarn. Если у вас есть какие-либо улучшения, я более чем рад их видеть.