Related questions

How to use results from i18nextBrowserLanguageDetector

2018-10-11 19:26 T Nguyen imported from Stackoverflow

I'm trying to use i18nextBrowserLanguageDetector to detect the user's browser language settings and redirect them to the translated page if we support their preferred language. The first part of the code below seems to be working fine, and will cache the user's language preference in a cookie correctly.

import i18next from 'i18next';
import LngDetector from 'i18next-browser-languagedetector';

i18next
  .use(LngDetector)
  .init({
    detection: {
      // order and from where user language should be detected
      order: ['cookie', 'navigator', 'htmlTag', 'path'],

      // keys or params to lookup language from
      lookupCookie: LANG_COOKIE,
      lookupFromPathIndex: 0,

      // cache user language on
      caches: ['cookie']
    }
  });

However, the problem I have is that I want to do something based on the user's language setting but it seems like i18next runs their detection code asynchronously but doesn't provide any callback that I can see. Part of the problem is that their docs are really slim. What I've done is to add some code on document ready like so:

document.addEventListener('DOMContentLoaded', () => {
  const langPref = Cookies(LANG_COOKIE);
  if (!!langPref && SUPPORTED_LANGS.includes(langPref) && langPref !== currentLocale())
    window.location.href = `${location.origin}/${langPref}${location.pathname}`;
});

But the language cookie is never set by the time the page completes loading. I could add a setTimeout/Interval but that's kind of hacky and inefficient.

1 answer

See also questions close to this topic

  • Scroll table from top to Bottom, then Back Up (and repeat)

    I have a code that on button press runs autoscroll on a single table but I need an option to Scroll Page from Top to Bottom, then Back Up (and Repeat), please check the code of my autoscroll option and what should I change or insert to enable this option?

     ini_set('MAX_EXECUTION_TIME', -1);

 define('SRT_STATE_SUBNUMBER', 0);
 define('SRT_STATE_TIME',      1);
 define('SRT_STATE_TEXT',      2);
 define('SRT_STATE_BLANK',     3);

 $lines   = file("uploads/".$file_name);

 $subs    = array();
 $state   = SRT_STATE_SUBNUMBER;
 $subNum  = 0;
 $subText = '';
 $subTime = '';

 foreach($lines as $line) {
     switch($state) {
         case SRT_STATE_SUBNUMBER:
             $subNum = trim($line);
             $state  = SRT_STATE_TIME;
             break;

         case SRT_STATE_TIME:
             $subTime = trim($line);
             $state   = SRT_STATE_TEXT;
             break;

         case SRT_STATE_TEXT:
             if (trim($line) == '') {
                 $sub = new stdClass;
                 $sub->number = $subNum;
                 list($sub->startTime, $sub->stopTime) = explode(' --> ', $subTime);
                 $sub->text   = $subText;
                 $subText     = '';
                 $state       = SRT_STATE_SUBNUMBER;

                 $subs[]      = $sub;
             } else {
                 $subText .= $line;
             }
             break;
     }
 }

 if ($state == SRT_STATE_TEXT) {
     // if file was missing the trailing newlines, we'll be in this
     // state here.  Append the last read text and add the last sub.
     $sub->text = $subText;
     $subs[] = $sub;
 }
 ?>
document.getElementById('table').style.display = 'block';

function autoScroll() {
  window.scrollBy(0, 400)
  var objDiv = document.getElementById("table");
  smooth_scroll_to(objDiv, objDiv.scrollHeight, 15900);
}

var smooth_scroll_to = function(element, target, duration) {
  target = Math.round(target);
  duration = Math.round(duration);
  if (duration < 0) {
    return Promise.reject("bad duration");
  }
  if (duration === 0) {
    element.scrollTop = target;
    return Promise.resolve();
  }

  var start_time = Date.now();
  var end_time = start_time + duration;

  var start_top = element.scrollTop;
  var distance = target - start_top;

  var smooth_step = function(start, end, point) {
    if (point <= start) {
      return 0;
    }
    if (point >= end) {
      return 1;
    }
    var x = (point - start) / (end - start);
    return x * x * (3 - 2 * x);
  }

  return new Promise(function(resolve, reject) {
    var previous_top = element.scrollTop;

    var scroll_frame = function() {
      if (element.scrollTop != previous_top) {
        reject("interrupted");
        return;
      }

      var now = Date.now();
      var point = smooth_step(start_time, end_time, now);
      var frameTop = Math.round(start_top + (distance * point));
      element.scrollTop = frameTop;

      if (now >= end_time) {
        resolve();
        return;
      }

      if (element.scrollTop === previous_top &&
        element.scrollTop !== frameTop) {
        resolve();
        return;
      }
      previous_top = element.scrollTop;

      setTimeout(scroll_frame, 0);
    }
    setTimeout(scroll_frame, 0);
  });
}
  • Wrong image url adding images into mapbox Popup

    Today, i'm trying to find a way to insert image property into mapbox popup. So, searching on website, I found a way to add this property into popup, but for an unknown reason the result is:

    http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg/

    instead of http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg.

    So the / in the end of image url is the reason to give a not found image. Do you know why?

    <script>
mapboxgl.accessToken = &#39;........&#39;;

var map = new mapboxgl.Map({
container: &#39;map&#39;,
style: &#39;mapbox://styles/mapbox/streets-v11&#39;,
center: [25.147437, 37.548452],
zoom: 9.5
});

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());


map.on(&#39;load&#39;, function () {

var location = document.getElementById(&quot;1234&quot;).innerText;
var locations= eval(&#39;[&#39;+location+&#39;];&#39;);
// Add a layer showing the places.
map.addLayer({
&quot;id&quot;: &quot;places&quot;,
&quot;type&quot;: &quot;symbol&quot;,
&quot;source&quot;: {&quot;type&quot;: &quot;geojson&quot;,&quot;data&quot;: {&quot;type&quot;: &quot;FeatureCollection&quot;,&quot;features&quot;: locations}},&quot;layout&quot;: {&quot;icon-image&quot;: &quot;{icon}-15&quot;,&quot;icon-allow-overlap&quot;: true}});

// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on(&#39;click&#39;, &#39;places&#39;, function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();

// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) &gt; 180) {
coordinates[0] += e.lngLat.lng &gt; coordinates[0] ? 360 : -360;
}

new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML('<b>'+ e.features[0].properties.title + '</b>' + e.features[0].properties.description + '<p><img src='+e.features[0].properties.image+'></img></p>')
.addTo(map);

});

// Change the cursor to a pointer when the mouse is over the places layer.
map.on(&#39;mouseenter&#39;, &#39;places&#39;, function () {
map.getCanvas().style.cursor = &#39;pointer&#39;;
});

// Change it back to a pointer when it leaves.
map.on(&#39;mouseleave&#39;, &#39;places&#39;, function () {
map.getCanvas().style.cursor = &#39;&#39;;
});
});

</script>
  • How do I flatten the multi object data and map to a JSON schema uisng reactJS?

    I want to generate a form of json schema and map the value.

    'queues.bootStrapServers': {
   title: 'BootStrap Servers',
   type: 'array',
   items: { 
     type : "object", 
     properties :{
       'hostUrl' : {
          type : "string"
       }
     }
   }
},

    UI schema

    'queues.bootStrapServers': {
   'ui:widget': 'CustomTextWidget',
   classNames: 'customwidth_48',
   'ui:options': { type: 'text', placeholder: 'Enter BootStrap Servers' },
 },

 {
   queues.bootStrapServers[0].hostUrl: "kafka://100.200.300.55:6251"
   queues.bootStrapServers[1].hostUrl: "kafka://100.200.300.56:6251"
   queues.bootStrapServers[2].hostUrl: "kafka://100.200.300.57:6251"
 }

    Unable to display the value

  • Sync Redux store with i18next LanguageDetector

    I want to keep track of current locale in my Redux store (store.l10n.locale) but I can't do it at initialization on account of a plugin to detect user language which may change it but not trigger any action...

    I managed to sync Redux store with current locale when the user selects a language and I even listened to locale param changes in active URI (thanks to a HOC, see below) to trigger an action.

    Here is my i18n initialization file:

    import i18n from 'i18next'
import Backend from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import moment from 'moment'

i18n
  // Load translation using xhr from /public/locales.
  .use(Backend)
  // Detect user language.
  .use(LanguageDetector)
  // Pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // Init i18next.
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      // Not needed for React as it escapes by default.
      escapeValue: false,
      format: (value, format, lng) => {
        if (value instanceof Date) return moment(value).format(format)
        return value
      }
    }
  })

// Keep the language on moment.js in sync with i18next
// by listening to the change language event.
i18n.on('languageChanged', newlocale => {
  moment.locale(newlocale)
})

export default i18n

    Here is my l10n slice (action type, action creator, reducer...):

    import { createSlice } from 'redux-starter-kit'
import { defaultLocale } from '../i18n/config'

const initialState = {
  locale: defaultLocale
}

const l10n = createSlice({
  slice: 'l10n',
  initialState: initialState,
  reducers: {
    changedLocale(state, action) {
      // 'Mutating' the state is possible
      // with the `createSlice()` function from `redux-starter-kit`
      // because it ships with the immer library.
      state.locale = action.payload
    }
  }
})

export default l10n
export const { reducer: l10nReducer, actions: l10nActions } = l10n
export const { changedLocale } = l10nActions

    Here is the HOC to set the current locale based on the active URI:

    import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { withTranslation } from 'react-i18next'
import { withRouter } from 'react-router-dom'

import { getLocaleFromPath } from '../../../utils/l10n'
import { changedLocale } from '../../../ducks/l10n'

class L10nHOC extends React.Component {
  constructor(props) {
    super(props)

    this.setLocale(getLocaleFromPath(this.props.location.pathname), true)

    this.props.history.listen(location => {
      this.setLocale(getLocaleFromPath(location.pathname))
    })

    // this.props.i18n.on('languageChanged', lng => {
    //   this.props.changedLocale(lng)
    // })
  }

  setLocale = (newLocale, force = false) => {
    // if (force || newLocale !== this.props.locale) {
    if (force || newLocale !== this.props.i18n.language) {
      this.props.i18n.changeLanguage(newLocale)
      this.props.changedLocale(newLocale)
    }
  }

  render() {
    return this.props.children
  }
}

const mapStateToProps = state => ({
  // locale: state.l10n.locale
})

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      changedLocale
    },
    dispatch
  )

export default withRouter(
  withTranslation()(
    connect(
      mapStateToProps,
      mapDispatchToProps
    )(L10nHOC)
  )
)

    But with my internationalization solution on top of react ('react-i18next'), I used a plugin to detect user language ('i18next-browser-languageDetector'). This plugin may change the current locale but this change is not reflected in my Redux store.

    I guess I should be 'listening' to the language change event and that is what I tried in my HOC, following i18next API doc:

        this.props.i18n.on('languageChanged', lng => {
      this.props.changedLocale(lng)
    })

    But it is not working as when the user first lands on my website from, e.g. in France, the displayed language is in French but the store is still in its initialState ('en' is the default language).

    The console shows that language was indeed detected and changed:

    i18next.js:27 i18next::backendConnector: loaded namespace translation for language en {public: "This content is public...", private: "This content is private!", …}
i18next.js:27 i18next::backendConnector: loaded namespace translation for language fr {public: "Ce contenu est public...", private: "Ce contenu est privé !", …}
i18next.js:27 i18next: languageChanged fr
i18next.js:27 i18next: initialized {debug: true, initImmediate: true, ns: Array(1), defaultNS: Array(1), fallbackLng: Array(1), …}
i18next.js:27 i18next: languageChanged fr

    Thank you in advance for your help...

  • react-i18next:: You will need pass in an i18next instance by using initReactI18next

    I am using i18next and react, and locally it works as expected, but when I deploy on Surge I always get this error: react-i18next:: You will need pass in an i18next instance by using initReactI18next

    They way I implemented it is almost identical to the react-i18next documentation.

    main.jsx

    import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import 'tabler-react/dist/Tabler.css'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App/container'
import i18next from './services/app/i18n'
// import './services/app/i18n' /* eslint-disable-line no-unused-vars */

import initStore from './initStore'

import '../sass/style.scss'
import 'dropzone/dist/dropzone.css'
import 'c3/c3.css'

const store = initStore()

// console.log('i18next', i18next) // if I uncomment this, it works on test server

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root'),
)

    services/app/i18n.js

    import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import Fetch from 'i18next-fetch-backend'

import * as apiConfig from '../../../config/api'

import { transformTranslationsData } from './translation-helpers'

const apiEnv = apiConfig[API_ENV]


i18n
  .use(Fetch)
  .use(initReactI18next)
  .init({
    // debug: true,
    lng: 'en',
    keySeparator: false,
    fallbackLng: {
      default: [ 'en' ],
    },
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
    react: {
      // wait: true,
      useSuspense: false,
    },
    backend: {
      loadPath: `${apiEnv.api}/translations?limit=0&locale={{lng}}&key=cm.*`,
      allowMultiLoading: true,
      parse: transformTranslationsData,
    },
  })

export default i18n

    The thing I don't understand is that when I console.log the i18next variable in main.jsx, it prints out the initialised object, and it works when deployed. If I don't log it, it just shows the error and the translations are not available in the app.

    I am using these versions:

        "i18next": "^15.1.0",
    "i18next-fetch-backend": "^2.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-i18next": "^10.9.0",

    It is going to be tricky for me to make a small repo that reproduces this error. For now I am hoping on clues and suggestions so I can investigate further.

  • Setting the namespace and default namespace when transforming with i18next-scanner

    I am working on a React Native project done with Typescript. The project has a modular structure, and each module has it's own translated strings. The problem is that when I generate the translations, all the occurrences of strings inside this.props.t go to the default namespace (common).

    This probably can be fixed by using the module name as default namespace in the transform function. The transform function would use the file path to determine the module that file is in and use that as a default namespace. I have hardcoded "account" in the code below, supposing that's the current module. I expect all strings to be saved under account/i18n/en.json and account/i18n/nl.json, but instead they are still saved in the common module, which is the default namespace (defaultNs). This is the code for the scanner:

    var fs = require("fs");
var path = require("path");
var typescript = require("typescript");

function typescriptTransform(options) {
    options = options || {};
    if (!options.extensions) {
        options.extensions = [".tsx"];
    }

    return function transform(file, enc, done) {
        const extension = path.extname(file.path);
        const parser = this.parser;
        let content = fs.readFileSync(file.path, enc);

        if (options.extensions.indexOf(extension) !== -1) {
            content = typescript.transpileModule(content, {
            compilerOptions: {
                target: 'es2018'
            },
            fileName: path.basename(file.path)
            }).outputText;
        parser.parseTransFromString(content, {
            options: {
                ns: "account",
                defaultNs: "account"
            }
        });
        parser.parseFuncFromString(content, {
            options: {
                ns: "account",
                defaultNs: "account"
            }
        });
    }
        done();
    };
};

module.exports = {
    options: {
        debug: true,
        func: {
            list: ['t', 'i18next.t', 'i18n.t'],
            extensions: ['.js', '.jsx', '.ts', '.tsx']
        },
        trans: {
            component: 'Trans',
            extensions: ['.js', '.jsx'],
        },
        transform: typescriptTransform({ extensions: ['.ts', '.tsx'] }),
        lngs: ['en', 'nl'],
        ns: ['account', 'common'],
        defaultNs: 'common',
        resource: {
            loadPath: 'app/{{ns}}/i18n/{{lng}}.json',
            savePath: 'app/{{ns}}/i18n/{{lng}}.json',
        },
    }
};

    The problem is that the account module strings are still being generated in the common module, although I'm clearly stating in transform that I want the ns and defaultNs to be account.

    What am I doing wrong here? Thanks in advance.