Localization in react using react i18 library but fetching json files from api call

Viewed 183

I want to receive one json file containing all the translation of all language and store it on the local storage and later from local storage retrieve those translation at run time. as of now I have achieved translation by maintaining files on the backend only in the public folder.But now I want to get that json from backend.As of now I have no idea if you have any let me know

here is i18.js file

import i18next from 'i18next'
import { initReactI18next } from 'react-i18next'
import HttpApi from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector';


i18next
.use(HttpApi)
.use(LanguageDetector)
.use(initReactI18next) 
.init({
  
  supportedLngs: ['en','hi', 'cn'],
  fallbackLng: 'en',
  debug: false,
  detection: {
    order: [ 'cookie', ],
    caches: ['cookie'],
  },
  backend: {
    loadPath:'/locales/{{lng}}/translation.json',
    
  },
})

and below is the JSON file that I will receive from backend when app loads.

{
`alllanguage:{

   en:{
     "welcome":"welcome"
     ...
   },
   "hi":{
     "welcome":"स्वागत हे"
   },
   "cn":{
      "welcome":"欢迎"
  }
}

}

help me out how I can use i18 library for location and fetching one json from backend and using the same file later on

1 Answers

why are fetching file from backend just store in the front end

Related