Language Change

By ukmodak | April 29th 2021 06:09:08 AM | viewed 179 times
public\locales\bn\translation.json =>

        "Welcome": "প্রতিক্রিয়া এবং প্রতিক্রিয়া- i18next এ স্বাগতম",
        "wishlist": "ইচ্ছার তালিকা",
        "cart": "কার্ট",
        "profile": "প্রোফাইল",
        "logout": "প্রস্থান",
        "loginfo": "লগ তথ্য",
        "product_page":"পণ্য পৃষ্ঠাতে স্বাগতম"

public\locales\en\translation.json =>

      "Welcome": "Welcome to React and react-i18next",
       "wishlist": "WishList",
       "cart": "Cart",
       "profile": "Profile",
       "logout": "Logout",
       "loginfo": "Loginfo",
       "product_page":"Welcome to Product Page"

src/i18n.js =>

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// don't want to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init
const languages =['en','bn']
    // load translation using http -> see /public/locales (i.e.
    // learn more:
    // detect user language
    // learn more:
    // pass the i18n instance to react-i18next.
    // init i18next
    // for all options read:
        fallbackLng: 'en',
        debug: true,
        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default

export default i18n;

TopMenu.js =>

import React, {Component} from "react";
import {Link} from "react-router-dom";
import {Col, Nav,NavDropdown} from 'react-bootstrap';
import  '../../css/topmenublock.css';

import RegistrationModal from "./RegistrationModal";
import LoginModal from "./LoginModal";

import '../../i18n' ;
import { useTranslation } from 'react-i18next';

class TopMenu extends Component {
	constructor(props) {



  render() {

	  const CustomTomMenu =(props)=>{
		  const { t } = useTranslation();

			  return (

				<Nav variant="pills" className="float-right">


					<button className="mr-2 nav-link cartButton" onClick={}>

						 <i className="fa fa-shopping-cart green" aria-hidden="true"></i> {this.props.bagItemPOne}</span>

				  <NavDropdown title={t('Home.loginfo')} id="nav-dropdown" >
						  	localStorage.getItem("auth") ?
								   <li><Link to="/profile">{t('Home.profile')}</Link></li>
								: <>
								    <li><LoginModal /></li>
									<li><RegistrationModal /></li>


    return (        
    <Col xs={12} sm={12} md={3} lg={3} xl={3} className="nopadding5 ">
		<<ustomTomMenu />        

export default TopMenu;