https://github.com/dmtrkovalenko/ns-react-18next

[Unmaintained] Namespaced i18next localization in react with no tears
https://github.com/dmtrkovalenko/ns-react-18next

context i18n i18next localization localized react typescript

Last synced: about 1 month ago
JSON representation

[Unmaintained] Namespaced i18next localization in react with no tears

• Host: GitHub
• URL: https://github.com/dmtrkovalenko/ns-react-18next
• Owner: dmtrKovalenko
• License: mit
• Created: 2018-06-22T14:23:07.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-29T10:22:06.000Z (over 5 years ago)
• Last Synced: 2024-05-19T17:31:39.036Z (7 months ago)
• Topics: context, i18n, i18next, localization, localized, react, typescript
• Language: TypeScript
• Homepage:
• Size: 198 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NS react-i18next

[![npm package](https://img.shields.io/npm/v/ns-react-i18next.svg)](https://www.npmjs.org/package/ns-react-i18next)

[![gzip bundle size](http://img.badgesize.io/https://unpkg.com/[email protected]/index.amd.js?compression=gzip

)](https://unpkg.com/[email protected]/index.amd.js)

[![codecov](https://codecov.io/gh/dmtrKovalenko/ns-react-18next/branch/master/graph/badge.svg)](https://codecov.io/gh/dmtrKovalenko/ns-react-18next)

[![Build Status](https://travis-ci.org/dmtrKovalenko/ns-react-18next.svg?branch=master)](https://travis-ci.org/dmtrKovalenko/ns-react-18next)

> Manage i18next namespaces with a power of react v16 context

## Unmaintained

The purpose of this library was merged to official [react-i18next](https://github.com/i18next/react-i18next) at v9. So please use it.  :)

### Installation

Available as npm package.

```sh

npm install ns-react-i18next

```

Add global provider to the root of your app

```jsx

import * as i18n from 'i18next';

import { I18NextProvider } from 'ns-react-i18next'

i18n

  .use(LanguageDetector)

  .init({

    resources: translations,

    fallbackLng: 'en',

    debug: true,

    defaultNS: 'common', // this namespace will be used if no namespace shared via context

    fallbackNS: 'common',

  });

ReactDom.render(

  

    

  ,

  document.getElementById('root')

)

```

### Usage

Use another provider to share namespace between components sub-tree. Any `` component under this provider will render translated string of shared namespace + children string. Note that when the language will be changed (with a help of `i18n.changeLanguage()`) - every translate will rerender by itself.

```jsx

import { Translate, NamespaceProvider } from 'ns-react-i18next'

  // specificNs:some_complex_structure

  
  some_complex_structure  

  
  something_specific  
 // specificNs:something_specific


```

Even possible to share namespace for several routes.

```jsx

  

  

```

There any `Translate` of CustomersList, ManageCustomer and thiers sub-components and sub-routes of take the 'customers' namespace.