ARPTranslate

ARPTranslate é uma biblioteca React para gerenciamento de traduções em aplicações. Com esta biblioteca, você pode facilmente definir e usar traduções baseadas em chaves, permitindo a troca dinâmica de idiomas.

Instalação

Para instalar o ARPTranslate, use o npm ou yarn:

npm install arp-translate

ou

yarn add arp-translate

Uso

Configurando o Contexto de Tradução

Primeiro, você precisa configurar o TranslationProvider em torno da sua aplicação. Isso é feito em um nível superior, geralmente no arquivo principal da sua aplicação.

import React from 'react';
import ReactDOM from 'react-dom';
import { TranslationProvider } from 'arp-translate';

const translations = [
  { groupKey: 'common', valueKey: 'greeting', translate: 'Olá', locale: 'pt-BR', id: '1' },
  { groupKey: 'common', valueKey: 'greeting', translate: 'Hello', locale: 'en-US', id: '2' },
];

const App = () => (
  <TranslationProvider translations={translations} currentLocale="pt-BR">
    {/* Seu componente principal */}
  </TranslationProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Usando o Hook de Tradução

Dentro dos componentes que precisam acessar as traduções, utilize o hook useTranslation para obter as traduções e o idioma atual.

import React from 'react';
import { useTranslation } from 'arp-translate';

const MyComponent = () => {
  const { translations, currentLocale } = useTranslation();

  const translate = (valueKey) => {
    const translation = translations.find(
      (t) => t.valueKey === valueKey && t.locale === currentLocale
    );
    return translation ? translation.translate : valueKey;
  };

  return (
    <div>
      <h1>{translate('greeting')}</h1>
    </div>
  );
};

Componentes

TranslationProvider

• Props:
  • translations: Um array de objetos de tradução.
  • currentLocale: A localidade atual (ex: 'pt-BR', 'en-US').
  • children: Os componentes que devem ter acesso ao contexto de tradução.
• Retorna:
  • translations: O array de traduções.
  • currentLocale: A localidade atual.

Exemplos de Tradução

Aqui está como você pode usar a função de tradução em diferentes componentes:

const AnotherComponent = () => {
  const { translations, currentLocale } = useTranslation();

  const greetUser = () => {
    console.log(translate('greeting'));
  };

  return (
    <div>
      <button onClick={greetUser}>Saudar Usuário</button>
    </div>
  );
};