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.
