You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
we are using your library via react-redux-i18n in a project. It works fine, except for 1 use case: It is currently only possible to pass strings (with or without HTML) into placeholders. Passing components is not possible.
Example
Let's say I have the following translation key defined:
We have dedicated components for certain types of links/buttons which we would like to use inside of a translated text, e.g.: 'some text <OpenModalButton /> more text'.
Other use cases I can think of include basically any dedicated "inline" component (if one does not want to rely on <strong>...</strong> or other native HTML tags).
Proposed algorithm
I've been looking through the source code and I think I would be able to create a PR which adds this functionality with roughly the following algorithm:
Loop through every replacement passed to <Translate />and convert it into an object of the following structure: { value, isComponent: true|false}.
If t() receives an array of objects, it ignores all objects where isComponent === true and translates everything else. If I18n.t(...) is used directly, nothing changes.
<Translate /> loops through the remaining placeholders (which are all component placeholders) and inserts the corresponding components into the translated string.
What do you think? Would you be open for that?
The text was updated successfully, but these errors were encountered:
Hi,
we are using your library via react-redux-i18n in a project. It works fine, except for 1 use case: It is currently only possible to pass strings (with or without HTML) into placeholders. Passing components is not possible.
Example
Let's say I have the following translation key defined:
✅ Replace with string (works fine):
Result:
✅ Replace with HTML (works fine):
Result:
⛔ Replace with component (doesn't work):
Custom component:
Expected result:
Use case
We have dedicated components for certain types of links/buttons which we would like to use inside of a translated text, e.g.:
'some text <OpenModalButton /> more text'
.Other use cases I can think of include basically any dedicated "inline" component (if one does not want to rely on
<strong>...</strong>
or other native HTML tags).Proposed algorithm
I've been looking through the source code and I think I would be able to create a PR which adds this functionality with roughly the following algorithm:
<Translate />
and convert it into an object of the following structure:{ value, isComponent: true|false}
.t()
receives an array of objects, it ignores all objects whereisComponent === true
and translates everything else. IfI18n.t(...)
is used directly, nothing changes.<Translate />
loops through the remaining placeholders (which are all component placeholders) and inserts the corresponding components into the translated string.What do you think? Would you be open for that?
The text was updated successfully, but these errors were encountered: