# rtk-translate > 'rtk-translate' - é uma biblioteca de tradução leve e intuitiva para React. Projetada para simplicidade e eficiência, ela permite que desenvolvedores integrem suporte multilíngue aos seus projetos React de maneira rápida e sem complicações. Latest version **1.0.39** (published 2023-10-13) · MIT license · 0 weekly downloads ## Install ```sh npm install rtk-translate pnpm add rtk-translate yarn add rtk-translate bun add rtk-translate ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.39 | | Published | 2023-10-13 | | First published | 2023-10-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 1 | | Unpacked size | 92.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 10 | | Author | vitor-nogueira-dev | | Maintainers | vitor-nogueira-dev | | Keywords | translation, react, localization, i18n, multilanguage, rtk, translate | ## Links - npm: https://www.npmjs.com/package/rtk-translate - Repository: https://github.com/vitor-nogueira-dev/rtk-translate - Homepage: https://github.com/vitor-nogueira-dev/rtk-translate#readme - Issues: https://github.com/vitor-nogueira-dev/rtk-translate/issues - npm.io page: https://npm.io/package/rtk-translate ## Dependencies (1) - [react-flag-kit](https://npm.io/package/react-flag-kit.md) ^1.1.1 ## Alternatives - [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads - [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads - [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads - [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads - [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads ## Recent versions - 1.0.39 (latest) — 2023-10-13 - 1.0.38 — 2023-10-13 - 1.0.37 — 2023-10-13 - 1.0.36 — 2023-10-13 - 1.0.35 — 2023-10-13 - 1.0.34 — 2023-10-13 - 1.0.33 — 2023-10-13 - 1.0.32 — 2023-10-13 - 1.0.31 — 2023-10-13 - 1.0.30 — 2023-10-13 - 1.0.29 — 2023-10-13 - 1.0.28 — 2023-10-13 - 1.0.27 — 2023-10-12 - 1.0.26 — 2023-10-12 - 1.0.24 — 2023-10-12 - … 26 more at https://npm.io/package/rtk-translate/versions ## README # 🌍 RTK - Translate (React Kit Translate) RTK - Translate é uma biblioteca criada para simplificar a tradução de seu site, portfólio, software e muito mais. Projetada para ser **simples**, **intuitiva** e **prática**. Integre-a facilmente em seus projetos e suporte quantos idiomas desejar. --- ## 📦 Instalação - **Usando npm:** ```bash npm install rtk-translate ``` - **Usando yarn:** ```bash yarn add rtk-translate ``` --- ## 🚀 Como começar ### 1. Configuração Inicial Envolva o componente principal da sua aplicação com o `TranslationProvider` e passe as propriedades necessárias: ```typescript import { TranslationProvider } from 'rtk-translate'; function App() { return ( ); } ``` ## 📝 Propriedades do `TranslationProvider`
Veja aqui | Propriedade | Tipo | Descrição | | -------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------- | | `storageKey` | `string` | Usado para salvar o idioma atual no localStorage, ela é opcional, caso não seja passada será salvo com a chave `rtk::language`. | | `languages` | `object` | Objeto contendo os idiomas, chaves de identificação e as traduções desejadas. | | `defaultLanguage` | `string` | Define um idioma padrão para o seu projeto, caso não seja passado será usado o valor default `pt`. | | `availableLanguages` | `string[]` | Array contendo todos os idiomas disponíveis no seu array `languages`. |
### Exemplo de `languages`:
Veja aqui ```javascript const languages = { pt: { heading: 'Título 1', subheading: 'Subtítulo A', buttonLabel: 'Clique Aqui', contactUs: 'Fale Conosco' }, en: { heading: 'Title 1', subheading: 'Subheading A', buttonLabel: 'Click Here', contactUs: 'Contact Us' }, fr: { heading: 'Titre 1', subheading: 'Sous-titre A', buttonLabel: 'Cliquez ici', contactUs: 'Contactez-nous' }, es: { heading: 'Título 1', subheading: 'Subtítulo A', buttonLabel: 'Haz clic aquí', contactUs: 'Contáctenos' } // ... } ```
### Exemplo de `availableLanguages`:
Veja aqui ```typescript const availableLanguages = ['pt', 'en', 'fr', 'es']; ```
### 2. Uso dentro dos componentes #### Exemplo de uso com select: ```typescript import { useTranslation } from 'rtk-translate'; function SellectLang() { const { translateText, setCurrentLanguage, currentLanguage } = useTranslation(); const handleLanguageChange = (event) => { setCurrentLanguage(event.target.value); }; return (
// Exemplo de uso com um select padrão para mudar o idioma

{translateText('heading')}

// traduz o texto com a chave 'heading'

{translateText('subheading')}

// traduz o texto com a chave 'subheading' // traduz o texto com a chave 'buttonLabel' {translateText('contactUs')} // traduz o texto com a chave 'contactUs'
); } ``` #### Exemplo de uso com botões: >⚠️ o onClick precisa ter uma callback, conforme o código abaixo! ```typescript import { useTranslation } from 'rtk-translate'; function ButtonsLang() { const { setCurrentLanguage } = useTranslation(); const handleLanguageChange = (lang) => setCurrentLanguage(lang); return (
) } ``` ## 3. Componente `LanguageSelect` O componente `LanguageSelect` é um seletor de idiomas desenvolvido para facilitar a experiência de internacionalização no seu site. Ele foi projetado pensando na usabilidade e eficiência, por isso apresenta as seguintes características: - **Idioma e Bandeira**: Cada opção no dropdown é representada pelo nome do idioma e uma bandeira correspondente, tornando visualmente intuitivo para os usuários. Se preferir uma abordagem mais minimalista, é possível ocultar o nome e exibir apenas a bandeira. - **Pesquisa Rápida**: Sabendo que alguns sites podem suportar uma extensa lista de idiomas, um campo de pesquisa foi incorporado ao dropdown. Ao clicar no seletor, um input é renderizado no topo do menu dropdown, permitindo que os usuários digitem e filtrem rapidamente para encontrar o idioma desejado. >⚠️ O nome e o input funcionam em conjunto, ou seja, se o nome do idioma estiver oculto, o input de pesquisa também será oculto. Para exibir o input de pesquisa, o nome do idioma deve estar visível. Utilize o `LanguageSelect` para oferecer uma navegação fluída e uma experiência de usuário enriquecedora, independente do número de idiomas que seu site suporta. ### Exemplo de uso do componente `LanguageSelect`: ```typescript import { LanguageSelect, useTranslation } from 'rtk-translate'; // import o arquivo css import 'rtk-translate/dist/index.css' function MyComponent() { const { translateText, setCurrentLanguage, currentLanguage, validLanguages } = useTranslation(); return (

{translateText('heading')}

{translateText('subheading')}

{translateText('contactUs')}
); } ``` ## 📝 Propriedades do componente `LanguageSelect`
Veja aqui | Propriedade | Tipo | Descrição | | -------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `selected` | `string` | Idioma atual do site, pode ser obtido através da propriedade `currentLanguage` do `useTranslation()`. | | `onChange` | `function` | Função que muda o idioma atual do site. Pode ser obtida através da propriedade `setCurrentLanguage` do `useTranslation()`. | | `availableLanguages` | `string[]` | Array que a `rtk-translate` já validou com base nos seus idiomas fornecidos ao `TranslationProvider`. É disponibilizado através da propriedade `validLanguages` do `useTranslation()`. | | `isNameVisible` | `boolean` | Booleano que define se o nome do idioma será renderizado junto com a bandeira, o valor default é `true`. | | `showSearchInput` | `boolean` | Booleano que define se o campo de pesquisa será renderizado no dropdown, o valor default é `true`. |
## 📝 Propriedades do `useTranslation()`
Veja aqui | Propriedade | Tipo | Descrição | | -------------------- | ---------- | ------------------------------------------------------------------------------------------------------------ | | `translateText` | `function` | Função que retorna a tradução correspondente à chave fornecida. Recebe a chave do texto que deseja traduzir. | | `setCurrentLanguage` | `function` | Função que define o idioma atual do site. Recebe o novo idioma desejado como parâmetro. | | `currentLanguage` | `string` | Representa o idioma atual em uso no site. | | `validLanguages` | `string[]` | Array de idiomas validados pela `rtk-translate`, com base nos idiomas fornecidos ao `TranslationProvider`. |
## 🎨 Classes `CSS` para `Customização` do componente `LanguageSelect` Aqui estão as classes CSS que você pode sobrescrever para personalizar a aparência do componente `LanguageSelect`:
Veja aqui | Classe | Descrição | Sobrescrição Sugerida | | ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | | `.rtk-language-selector` | Estilização geral do seletor de idioma. | `.rtk-language-selector { ... !important; }` | | `.rtk-current-language` | Estilo do idioma atual exibido. | `.rtk-current-language { ... !important; }` | | `.rtk-current-language > img` | Estilo da imagem/bandeira do idioma atual. | `.rtk-current-language > img { ... !important; }` | | `.rtk-languages-dropdown` | Estilo do menu dropdown que lista os idiomas. | `.rtk-languages-dropdown { ... !important; }` | | `.rtk-languages-dropdown .rtk-language-option > img` | Estilo da imagem/bandeira nos itens do dropdown. | `.rtk-languages-dropdown .rtk-language-option > img { ... !important; }` | | `.rtk-language-option, .rtk-language-no-results` | Estilo dos itens individuais no dropdown. | `.rtk-language-option { ... !important; }` | | `.rtk-language-option:last-child` | Estilo para o último item no dropdown. | `.rtk-language-option:last-child { ... !important; }` | | `.rtk-language-option:hover` | Estilo hover dos itens no dropdown. | `.rtk-language-option:hover { ... !important; }` | | `.rtk-language-input-search` | Estilo do campo de busca no dropdown. | `.rtk-language-input-search { ... !important; }` |
--- ### Como contribuir Para contribuir com o projeto, leia o arquivo [CONTRIBUTING.md](/CONTRIBUTING.md) --- ### Mais infos - [Rtk Translate](https://github.com/vitor-nogueira-dev/rtk-translate) - repositório no GitHub. --- ### Dúvidas, sugestões e melhorias Se você tiver dúvidas, quiser relatar um bug ou solicitar novos recursos, por favor, abra uma [issue](https://github.com/vitor-nogueira-dev/rtk-translate/issues) no nosso repositório, ou conecte-se comigo no Linkedin - [Vitor Nogueira](https://www.linkedin.com/in/vitor-nogueira-dev/) --- ### Referências - [React Flag Kit](https://www.npmjs.com/package/react-flag-kit) - [Rtk Translate](https://www.npmjs.com/package/rtk-translate) --- ### Licença Rtk Translate is [MIT licensed](./LICENSE). --- ### Agradecimentos Este projeto utiliza a biblioteca **React Flag Kit**, cujo copyright é detido por Bowtie AB e está licenciada sob a licença MIT. Detalhes sobre esta licença podem ser encontrados em [MIT licensed](./LICENSE-ReactFlagKit.txt). --- > 🔗 Veja uma [demonstração ao vivo aqui](https://rtk-translate-demo.vercel.app/). --- > ⭐️ Este README foi gerado a partir do Gerador de README drag in drop. Experimente aqui: [Code Mark](https://code-mark.vercel.app/) --- _Source: https://npm.io/package/rtk-translate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._