i18next

HTML tags in i18next translation files in React

by

Don’t put the HTML tags in the translation. It’s a bad idea anyway. Separation of concerns guys will be all whiny about it. Use the <Trans> component if react-i18next https://react.i18next.com/latest/trans-component Do like so: // Component.js <Trans>Welcome, <strong>User!</strong>, here’s your <strong>broom</strong></Trans> And the corresponding translation file: // your locales/starwars_en.js file translations: { “Welcome, <1>User!</1>, here’s your … Read more

react-i18next: interpolation of link in HTML tag in the middle of the text

by

With react-i18next v4.4.0 we introduced a new component Trans: <Trans i18nKey=”optionalKey”>See the <Link to=”/more”>description</Link> below.</Trans> The json would be: See the <1>description</1> below. or even more complex: <Trans i18nKey=”userMessagesUnread” count={count}> Hello <strong title={t(‘nameTitle’)}>{{name}}</strong>, you have {{count}} unread message. <Link to=”/msgs”>Go to messages</Link>. </Trans> The new feature is documented here: https://react.i18next.com/latest/trans-component

Get current language next-i18next

by

withTranslation injects the i18n object. import {withTranslation} from ‘../config/next-i18next’; const Home = function Home({ i18n }) { return (<div>{i18n.language}</div>) // —————-^ }; Home.getInitialProps = async () => { return {namespacesRequired: [‘home’]} }; export default withTranslation(‘home’)(Home); Or using Hooks, import {useTranslation} from ‘../config/next-i18next’; const Home = function Home() { const { i18n } = useTranslation(‘home’); return … Read more

i18next::pluralResolver: Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill

by

Look like an issue on android. i18n.use(initReactI18next).init({ compatibilityJSON: ‘v3′, <— add this line. lng:’th’, fallbackLng: ‘en’, resources:{ en:english, th:thai }, interpolation: { escapeValue: false }, react: { useSuspense:false, } }); It should resolve your issue. You might need to check this. Have fun.

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

by

From the next-i18next docs: Then we add serverSideTranslation to getStaticProps or getServerSideProps (depending on your case) in our page-level components. Meaning you’ll need to add serverSideTranslation to the pages that need translations. For example in your pages/d/[tab]/index file: import Head from ‘next/head’; import { Input } from ‘../../../components/Input’; import YouTube from ‘../../../components/youtube/Main’; import { serverSideTranslations … Read more

React i18n break lines in JSON String

by

You can do it with css white-space: pre-line; & \n in the translation text. const root = document.getElementById(‘root’); i18next.init({ lng: ‘en’, resources: { en: { translation: { “key”: “Hello world\nThis sentence should appear on the second line” // —————-^ new line char } } } }, function(err, t) { // initialized and ready to go! … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)