https://github.com/crimx/val-i18n-react

React goodies for val-i18n
https://github.com/crimx/val-i18n-react

gettext globalization hook i18n internationalization l10n localization react react-hooks reactjs translation

Last synced: about 1 month ago
JSON representation

React goodies for val-i18n

• Host: GitHub
• URL: https://github.com/crimx/val-i18n-react
• Owner: crimx
• License: mit
• Created: 2023-01-18T03:08:14.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-22T08:56:18.000Z (over 2 years ago)
• Last Synced: 2025-02-14T07:06:10.386Z (over 1 year ago)
• Topics: gettext, globalization, hook, i18n, internationalization, l10n, localization, react, react-hooks, reactjs, translation
• Language: TypeScript
• Homepage: https://crimx.github.io/val-i18n-react/
• Size: 487 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# [val-i18n-react](https://github.com/crimx/val-i18n-react)



  



[![Build Status](https://github.com/crimx/val-i18n-react/actions/workflows/build.yml/badge.svg)](https://github.com/crimx/val-i18n-react/actions/workflows/build.yml)

[![npm-version](https://img.shields.io/npm/v/val-i18n-react.svg)](https://www.npmjs.com/package/val-i18n-react)

[![Coverage Status](https://img.shields.io/coveralls/github/crimx/val-i18n-react/master)](https://coveralls.io/github/crimx/val-i18n-react?branch=master)

[![minified-size](https://img.shields.io/bundlephobia/minzip/val-i18n-react)](https://bundlephobia.com/package/val-i18n-react)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?maxAge=2592000)](http://commitizen.github.io/cz-cli/)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-brightgreen.svg?maxAge=2592000)](https://conventionalcommits.org)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

React goodies for [val-i18n](https://github.com/crimx/val-i18n).

## Install

```bash

npm add val-i18n-react val-i18n value-enhancer

```

## API

- `I18nProvider` to provide `i18n` context for descendant components.

- `useTranslate` hook to subscribe and get the latest `i18n.t`.

- `useLang` hook to subscribe and get the latest `i18n.lang`.

- `useI18n` hook to subscribe and get the latest `i18n` instance.

- `` component to insert React elements into translation template messages.

## Usage

See live example on [CodeSandbox](https://codesandbox.io/s/val-i18n-react-o887n0).

```jsx

import { I18n } from "val-i18n";

import { I18nProvider, useTranslate } from "val-i18n-react";

const i18n = new I18n("en", { en: { fruit: "apple" } });

const MyComponent = () => {

  const t = useTranslate();

  return 
{t("fruit")}
;

};


const App = () => {

  return (

    

      

    

  );

};

```

### Cascading I18nProvider

You can nest multiple ``s to create cascading i18n contexts.

```tsx

import { I18n } from "val-i18n";

import { I18nProvider, useTranslate } from "val-i18n-react";

const baseI18n = new I18n("en", { en: { confirm: "Confirm" } });

const loginI18n = new I18n("en", { en: { login: "Login" } });

const MyComponent = () => {

  const t = useTranslate();

  return (

    


      {t("confirm")}

      {t("login")}

    

  );

};


const App = () => {

  return (

    

      

        

      

    

  );

};

```

### Trans Component

To insert React elements into the translation message:

```jsx

import { Trans, useTranslate } from "val-i18n-react";

import { I18n, I18nProvider } from "val-i18n";

const locales = {

  en: {

    author: "CRIMX",

    fruit: "apple",

    eat: "{{name}} eats {{fruit}}.",

  },

};

const i18n = new I18n("en", locales);

const MyComponent = () => {

  const t = useTranslate();

  return (

    

      {t("author")}

      

        {t("fruit")}

      

    

  );

};

const App = () => {

  return (

    

      

    

  );

};

```

↓Outputs:

```jsx

<>

  CRIMX eats apple.

<>

```

`data-t-slot` can be ignored if there is only one placeholder.

```jsx

  
B


```

↓Outputs:

```jsx

<>

  a
B
c

>

```