React-i18next: Support formatting in Interpolate component

[KonstantinKritsin]

Could you please add support for i18next formatting in Interpolate component?

Initial settings:

import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
import moment from 'moment';

i18n.use(XHR)
.init({
  fallbackLng: 'en',
  ns: ['common'],
  defaultNS: 'common',
  debug: true,
  interpolation: {
    format: function(value, format, lng) {
      if(value instanceof Date) return moment(value).format(format);
      return value;
    }
  }
});

common.json:

{
  "copyright":"© {{date, YYYY}}. {{link}} - All rights reserved"
}

and component:

<Interpolate i18nKey="copyright" useDangerouslySetInnerHTML date={new Date()} link={<a href="http://company" target="blank">Company</a>}/>

result is warning:
i18next: interpolator: missed to pass in variable date, YYYY for interpolating © {{date,YYYY}}. {{link}} - All rights reserved

Thank you

[jamuhl]

hm...yes...did not thought of the case both components and formatted content. Good idea to add this.

Not yet got an idea when i will have the time to do so...should be able to add this next week. But no promise.

Meanwhile as workaround you might pass the formatted date. Will come back to you asap.

[jamuhl]

supported in [email protected]

see https://github.com/i18next/react-i18next/blob/master/example/app/i18n.js#L20 for configuration
see https://github.com/i18next/react-i18next/blob/master/example/locales/en/common.json#L3 for sample json
see https://github.com/i18next/react-i18next/blob/master/example/app/components/View.js#L39 for code using it

All like expected i hope...

[KonstantinKritsin]

Thanks) all works as expected.
Sorry for late reply

[OEvgeny]

@jamuhl Cool, all links are dead.

[jamuhl]

the links are over a year old...the new samples have no use of the Interpolate anylonger...as more or less that component is replaced by Trans component: https://react.i18next.com/components/trans-component.html

[parulMilttal]

Hi,
I have the same ques, I have used format function in interpolation but it is not working.
const initI18next = (lang) => {
return i18next.use(XHR).init({
backend: {
loadPath: () => {
return "/locales/{{lng}}/{{ns}}.json";
},
},
debug: true,
fallbackLng: "en-US",
interpolation: {
escape(value) {
return value;
},
format(value, format) {
if (format === "uppercase") {
return value.toUpperCase();
}
return value;
},
},
lng: lang,
load: "currentOnly",
ns: nameSpaces,
react: {
wait: true,
},
});
};

[jamuhl]

@parulMilttal please also show the value of the translation key and how you call t to get the formatted translation

also consider adding a codesandbox sample for easier reproduction of your misconfiguration

[parulMilttal]

@jamuhl ,
i have used the below translation key:
"DELETE_LOCATION_ALERT": "Are you sure you want to delete location {{locationName,bold}}?",
I have used t as :
getNameLabel = () => {
if (this.props.name) {
return this.props.name ;
} else {
return this.props.defaultText;
}
};

{t("locations:DELETE_LOCATION_ALERT", { locationName: this.getNameLabel() })}

[jamuhl]

{{locationName, bold}} -> where did you define the format bold? i only see uppercase

format(value, format) {
if (format === "uppercase") {
return value.toUpperCase();
}
return value;
}

[parulMilttal]

That I have changed while pasting the code in forum, Issue is not with
this. My problem is format function is not excecuting.

On Thu, 28 Feb 2019 at 5:58 PM, Jan Mühlemann [e-mail]
wrote:

{{locationName, bold}} -> where did you define the format bold? i only
see uppercase

format(value, format) {
if (format === "uppercase") {
return value.toUpperCase();
}
return value;
}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/i18next/react-i18next/issues/229#issuecomment-468254826,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AcZJBsoSsZGfVWPRl9fqxiMXv8fPMf0bks5vR8tugaJpZM4L3h8e
.

[jamuhl]

make a sample on codesandbox...so i can check. Not sure where the issue is...but tests say it works ;)

[parulMilttal]

Hey
I need some time to create sandbox for this as we have used so many things
this is a big project. Might there are some conflicts between the
comoponents due to which format function is not working. If there is any
specific requirement to use format then pls let me know.

Thanks
Parul

On Thu, 28 Feb 2019 at 8:55 PM, Jan Mühlemann [e-mail]
wrote:

make a sample on codesandbox...so i can check. Not sure where the issue
is...but tests say it works ;)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/i18next/react-i18next/issues/229#issuecomment-468314169,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AcZJBqk3ZTjLVca1OdDalhZVjAt4mhNgks5vR_TkgaJpZM4L3h8e
.

[parulMilttal]

Also I want to know how I can debug the format function. I have set debug
true in init.

On Sat, 2 Mar 2019 at 11:46 AM, Parul Mittal [e-mail]
wrote:

Hey
I need some time to create sandbox for this as we have used so many things
this is a big project. Might there are some conflicts between the
comoponents due to which format function is not working. If there is any
specific requirement to use format then pls let me know.

Thanks
Parul

On Thu, 28 Feb 2019 at 8:55 PM, Jan Mühlemann [e-mail]
wrote:

make a sample on codesandbox...so i can check. Not sure where the issue
is...but tests say it works ;)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/i18next/react-i18next/issues/229#issuecomment-468314169,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AcZJBqk3ZTjLVca1OdDalhZVjAt4mhNgks5vR_TkgaJpZM4L3h8e
.

[jamuhl]

No...it's straight forward -> Just made a jsfiddle myself doing an toUpperCase: https://jsfiddle.net/acmLhybj/

[parulMilttal]

Is lng an important parameter?? Because I am not giving lng as parameter

On Sat, 2 Mar 2019 at 1:29 PM, Jan Mühlemann [e-mail]
wrote:

No...it's straight forward -> Just made a jsfiddle myself doing an
toUpperCase: https://jsfiddle.net/acmLhybj/

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/i18next/react-i18next/issues/229#issuecomment-468898041,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AcZJBsOTSG-ijh4HgMr-uSMugM8Wi0g0ks5vSi9mgaJpZM4L3h8e
.

[parulMilttal]

Also i m using XHR from i18nnext-xhr-bacend

On Sun, 3 Mar 2019 at 8:57 AM, Parul Mittal [e-mail]
wrote:

Is lng an important parameter?? Because I am not giving lng as parameter

On Sat, 2 Mar 2019 at 1:29 PM, Jan Mühlemann [e-mail]
wrote:

No...it's straight forward -> Just made a jsfiddle myself doing an
toUpperCase: https://jsfiddle.net/acmLhybj/

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/i18next/react-i18next/issues/229#issuecomment-468898041,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AcZJBsOTSG-ijh4HgMr-uSMugM8Wi0g0ks5vSi9mgaJpZM4L3h8e
.

[jamuhl]

@parulMilttal lng must be set if not using a languageDetector (so seems in your case it must be set). The difference when using xhr is the loading is async -> don't use the t function before init callback / Promise resolves.

[parulMilttal]

Ok I will try with this and revert if it will not work.

Thanks
Parul

On Sun, 3 Mar 2019 at 12:19 PM, Jan Mühlemann [e-mail]
wrote:

@parulMilttal https://github.com/parulMilttal lng must be set if not
using a languageDetector (so seems in your case it must be set). The
difference when using xhr is the loading is async -> don't use the t
function before init callback / Promise resolves.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/i18next/react-i18next/issues/229#issuecomment-468994622,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AcZJBqi89YgvkUnfB0NFJnwezfbahyy4ks5vS3CWgaJpZM4L3h8e
.

[parulMilttal]

hi @jamuhl ,
It works!! But my problem hasn't resolved I want to bold that string which is in interpolation. How to do that can you please help me in that. string method bold giving me the html tag and when I am using dangerouslySetInnerHTML it is changing the tags in but in string.

like in this the first string is in dangerouslySetInnerHTML .

Thanks
Parul

[jamuhl]

@parulMilttal rather sure it works if done correctly...for helping you i will need a codesandbox isolating your problem...not have the time to set this up myself