# react-hook-translations

> Simple translations manager for React using the potential of React-Hooks and autocompletion

Latest version **2.2.2** (published 2022-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hook-translations
pnpm add react-hook-translations
yarn add react-hook-translations
bun add react-hook-translations
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2022-03-31 |
| First published | 2021-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Fabio Garcia Balbuena |
| Maintainers | fagarbal |
| Keywords | i18n, react-hooks, react, translations |

## Links

- npm: https://www.npmjs.com/package/react-hook-translations
- Repository: https://github.com/fagarbal/react-hook-translations
- Homepage: https://github.com/fagarbal/react-hook-translations#readme
- Issues: https://github.com/fagarbal/react-hook-translations/issues
- npm.io page: https://npm.io/package/react-hook-translations

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^17.0.1
- [universal-cookie](https://npm.io/package/universal-cookie.md) ^4.0.4

## 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

- 2.2.2 (latest) — 2022-03-31
- 2.2.1 — 2022-03-26
- 2.2.0 — 2022-03-26
- 2.1.4 — 2022-02-28
- 2.1.1 — 2022-02-28
- 1.0.2 — 2021-02-19
- 1.0.1 — 2021-02-19
- 1.0.0 — 2021-02-19

## README

# react-hook-translations

[![npm version](https://badge.fury.io/js/react-hook-translations.svg)](https://badge.fury.io/js/react-hook-translations)
[![Coverage Status](https://coveralls.io/repos/github/fagarbal/react-hook-translations/badge.svg?branch=main)](https://coveralls.io/github/fagarbal/react-hook-translations?branch=main)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Simple translations manager for React using the potential of React-Hooks and autocompletion.

## Installing

```
npm install react-hook-translations
```

## Setup

By default it tries to use the locale returned by `window.navigator.language`, otherwise it takes the defined fallback attribute.

### Configuration File

```ts
// translations.config.ts

import { initTranslations } from 'react-hook-translations';

const translations = initTranslations({
    locales: ['en', 'es'],

    fallback: 'es',
    // optional
    // default locale. If not defined, locales[0] is the fallback value

    storage: 'localStorage',
    // optional
    // default: localStorage
    // options: localStorage | sessionStorage | cookie

    storageKey: 'locale',
    // optional
    // default: locale
    // key used for storing data into localStorage, sessionStorage or cookie
});

export const {
    useLocale,
    makeTranslations,
    TranslationsProvider,
    locales,
} = translations;

```

### Context Provider

```tsx
// App.tsx

import { TranslationsProvider } from './translations.config.ts';
import CustomComponent from './CustomComponent.tsx';

const App: React.FC = () => {
  return (
    <TranslationsProvider>
        <CustomComponent />
    </TranslationsProvider>
  );
}

export default App;

```

## useTranslations hook

```tsx
// CustomComponent.tsx

import { makeTranslations } from './translations.config.ts';

const useTranslations = makeTranslations({
  en: {
    title: 'Title',
    description: 'Description',
  },
  es: {
    title: 'Titulo',
    description: 'Descripción',
  },
});

const CustomComponent: React.FC = () => {
  const translations = useTranslations();

  return (
    <div>
      <div>{translations.title}</div>
      <div>{translations.description}</div>
    </div>
  );
}

export default CustomComponent;

```

## useLocale hook

```tsx
// CustomComponent.tsx

import { useLocale, makeTranslations } from './translations.config.ts';

const useTranslations = makeTranslations({
  en: {
    language: 'Language',
    changeLanguage: 'Change language',
    languages: {
      en: 'English',
      es: 'Spanish',
    }
  },
  es: {
    language: 'Idioma',
    changeLanguage: 'Cambiar idioma',
    languages: {
      en: 'Inglés',
      es: 'Español',
    },
  },
})

const CustomComponent: React.FC = () => {
  const [locale, setLocale, locales] = useLocale();
  const translations = useTranslations();

  return (
    <div>
      <div>
        {translations.language}: {translations.languages[locale]}
      </div>

      {locales.map((lang) =>
        <button onClick={() => setLocale(lang)}>
          <span>{translations.changeLanguage}</span>
          <span>{translations.languages[lang]}</span>
        </button>
      )}
    </div>
  );
}

export default CustomComponent;

```

## Examples

### JSX translations

```tsx
// CustomComponent.tsx

import { makeTranslations } from './translations.config.ts';

const useTranslations = makeTranslations({
  en: {
    title: <strong>Title</strong>,
    User: () => <strong>User</strong>,
    messages: (num: number) => <i>You have {num} messages</i>,
    AboutUs: ({ link }: { link: string }) => <a href={link}>About us</a>,
  },
  es: {
    title: <strong>Titulo</strong>,
    User: () => <strong>Usuario</strong>,
    messages: (num: number) => <i>Tienes {num} mensajes</i>,
    AboutUs: ({ link }: { link: string }) => <a href={link}>Sobre nosotros</a>,
  },
});

const CustomComponent: React.FC = () => {
  const translations = useTranslations();

  return (
    <div>
      {translations.title}
      <translations.User />
      {translations.messages(3)}
      <translations.AboutUs link="https://github.com" />
    </div>
  );
}

export default CustomComponent;

```

---
_Source: https://npm.io/package/react-hook-translations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._