Allow to pass function for interpolation

[ixrock]

Let's imagine i18n.init() has the following resources:

    resources: {
      en: {
        default: {
          message: "Hello world <test>some text</test>!",
        }
      },
    },

I'd like to consume such translation string inside component as:

t("message", {
  test: text => <b>{text}</b>
})

And in the result we have something like it's written in JSX:

<>
 Hello world <b>some text</b>!
</>

The children within <test></test> could be any of type as inside normal react-component.
Possible?

[orzechowskid]

not possible at the moment, no.

it would probably be easy to search for ${prefix}${elementName}${suffix} and a matching ${prefix}/${elementName}${suffix} and do something different if found. but any solution would have to somehow still allow for HTML to be embedded in the i18next dictionary strings yet remain unparsed by this library, when such behavior is desired by the user. I can also easily see another enhancement request for tag attributes to be passed as props, or a request to support nested components, and all of a sudden a full-on HTML/XML parser needs to be included here. that's a road down which I'm not yet sure I want to go.

in the meantime, do you have control over what strings get placed in the resource dictionary being provided to i18next?

(also, while investigating your request I realized that this library doesn't support interpolation of React SFCs, so thanks for prompting me to review my own code!)

[ixrock]

Hi, sorry for late reply, I was quite busy last 2 weeks writing my own i18n implementation of what I want to see in such library.
Here is the a link if you're interested https://github.com/ixrock/i18n-jsnext

And here is react-postprocess plugin (i18next-compatible) for params interpolation with react-components:
https://github.com/ixrock/i18n-jsnext/blob/master/src/plugins/react-postprocess.tsx
You can take some ideas from there for your plugin if you want :)

Example of use:

// i18n-instance.js
export const i18n = new I18n({
  resources: {
    en: {
      translations: {
        greetings: "Hello <bold title='Title also passed to react component'>world</bold>!"
      }
    }
  },
  plugins: [
    reactPostProcess(),
  ],
});

// usage somewhere in other components
<I18nMessage message="greetings" params={{
     bold: innerContent => <b onClick={() => console.log("Cool!")}>{innerContent}</b>
}}/>

Cheers!