
With our previous release, we’ve introduced a new feature to our i18n library. When we first came up with this library we thought about a simple approach. A typesafe i18n library, and if it’s necessary a text modifier, we just need to wrap them with simple HTML tags, for example <b>
and <i>
, and use the I18nHtml
component to render it.
This wasn’t sufficient for more complex cases, so we created the I18nWrapped
component. This enables you to wrap any component of your choice! The best part is that it uses TypeScript to ensure that you’re doing everything correctly.
Let’s see how it works.
Firstly we’ve created a new function called wrapped(componentName: string): Wrapped<componentName>
. It tells the name of the components that can be used on the I18nWrapped
component props.
Secondly, we’ve changed our ReferenceDictionary
type to be able to add these newly wrapped
components into your dictionary.
On your dictionary type and in our en
dictionary:
And finally, you can use it by simply setting the dragFile
as the children
of the I18nWrapped
component. This will infer the type of the components
prop and will show the required properties as informed in your dictionary.
That is it for this quick update! You can start using your custom components with the i18n lib in a typesafe way.
Thanks for reading, and stay tuned for more updates!
Kogito Tooling i18n update was originally published in kie-tooling on Medium, where people are continuing the conversation by highlighting and responding to this story.