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
<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
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.